1. 程式人生 > >angular動態新增帶有ng-click的元素節點方法

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來操作了。。。。。。