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 = '

{{ arr }}

'; 

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

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

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

你可能感兴趣的:(angular)