本文實(shí)例講述了AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法。分享給大家供大家參考，具體如下：

1 . 我們知道在jQuery中，動(dòng)態(tài)生成一個(gè)元素，如果要在動(dòng)態(tài)生成元素的同時(shí)，動(dòng)態(tài)綁定事件，可以通過live/on方法（在jquery3.0中已經(jīng)廢除了bind方法）。

2 . 在AngularJS中，操作DOM一般在指令中完成，事件監(jiān)聽機(jī)制是在對(duì)于已經(jīng)靜態(tài)生成的dom綁定事件，而如果在指令中動(dòng)態(tài)生成了DOM節(jié)點(diǎn)，動(dòng)態(tài)生成的節(jié)點(diǎn)不會(huì)被JS事件監(jiān)聽。

舉例來說：

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

這個(gè)指令中，會(huì)生成新的DOM節(jié)點(diǎn)：

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

但是如果不做處理，這里的ng-click事件并不能實(shí)現(xiàn)，因?yàn)槭录谋O(jiān)聽在靜態(tài)html頁面生成時(shí)候已經(jīng)完成。那么如何給動(dòng)態(tài)生成的元素，綁定事件，實(shí)現(xiàn)事件的動(dòng)態(tài)監(jiān)聽呢？

3 . 通過$compile服務(wù)，編譯DOM，實(shí)現(xiàn)動(dòng)態(tài)的事件綁定

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

通過這兩句，首先先編譯DOM，然后用編譯后的DOM加入到之前的靜態(tài)節(jié)點(diǎn)中，就能實(shí)現(xiàn)動(dòng)態(tài)綁定事件，之類注意，應(yīng)該注入$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);        })      });    }  }})

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。