angular动态添加带有ng-click的元素节点方法

最近在制作公司一个网页时,有一部分元素节点需要获取数据后再动态生成并那个插入到制定元素中,在插入的元素节点中用到了ng-click指令,

但是在页面中点击ng-click的元素并不起作用,后来想了想,因为页面加载时angular会扫描appName里的元素,并把angular的一些指令进行解释编译,

动态生成的元素节点显然是没有被编译过的,怎么样才能起作用呢?那就是用到了angular的一个服务$compile,一看单词就知道什么意思了,废话不多说了,

直接上一个小例子就ok喽。。。。。。

var app = angular.module('app', []); 

app.controller('appCtrl', function ($scope, $compile) { 

$scope.arrs = [1,2,3,4,5,"成", "功", "编", "译"]; 

var html = '<h1 ng-repeat="arr in arrs">{{ arr }}</h1>'; 

var $html = $compile(html)($scope); // 编译

$('body').before($html); }); angular.bootstrap(document, ['app']);// 插入到dom 

以上这段代码我也是在网上找的,没有时间亲测,不过应该是没问题。最主要的一句代码就是$compile(html)($scope),调用$compile()函数会返回一个函数,并把$scope传进去,之前的项目中由于时间紧张,我直接用跳过了angular的服务,下次再碰到这种问题就不用写一大堆jquery来操作了。。。。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值