AngularJS實現給動態產生的元素繫結事件的方法_AngularJS

本文執行個體講述了AngularJS實現給動態產生的元素繫結事件的方法。分享給大家供大家參考，具體如下：

1 . 我們知道在jQuery中，動態產生一個元素，如果要在動態產生元素的同時，動態綁定事件，可以通過live/on方法（在jquery3.0中已經廢除了bind方法）。

2 . 在AngularJS中，操作DOM一般在指令中完成，事件監聽機制是在對於已經靜態產生的dom綁定事件，而如果在指令中動態產生了DOM節點，動態產生的節點不會被JS事件監聽。

舉例來說：

angular.module('myapp',[]).directive('myText',function(){  return{    restrict:'A',    template:'<div ng-click="hello()">Hi everyone</div>',    link:function(scope,ele,attr){    }  }})

這個指令中，會產生新的DOM節點：

<div ng-click="hello()">Hi everyone</div>

但是如果不做處理，這裡的ng-click事件並不能實現，因為事件的監聽在靜態html頁面產生時候已經完成。那麼如何給動態產生的元素，綁定事件，實現事件的動態監聽呢？

3 . 通過$compile服務，編譯DOM，實現動態事件綁定

var template:'<div ng-click="hello()">Hi everyone</div>',var content = $compile(template)(scope);

通過這兩句，首先先編譯DOM，然後用編譯後的DOM加入到之前的靜態節點中，就能實現動態綁定事件，之類注意，應該注入$compile service

.directive('myText',function($compile){})

完整的代碼如下：

angular.module('myapp',[]).directive('myText',function($compile){  var template:'<div ng-click="hello()">Hi everyone</div>',  return{    restrict:'A',    link:function(scope,ele,attr){       ele.on("click", function() {        scope.$apply(function() {          var content = $compile(template)(scope);          element.append(content);        })      });    }  }})

更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程式設計有所協助。