本文實例講述了AngularJS實作給動態產生的元素綁定事件的方法。分享給大家供大家參考，具體如下：
1 . 我們知道在jQuery中，動態產生一個元素，如果要在動態產生元素的同時，動態綁定事件，可以透過live/on方法（在jquery3.0中已經廢除了bind方法）。
2 . 在AngularJS中，操作DOM一般在指令中完成，事件監聽機制是在對於已經靜態生成的dom綁定事件，而如果在指令中動態生成了DOM節點，動態生成的節點不會被JS事件監聽。
舉例來說：
angular.module('myapp',[])
.directive('myText',function(){
return{
restrict:'A',
template:'<p ng-click="hello()">Hi everyone</p>',
link:function(scope,ele,attr){
}
}
})這個指令中，會產生新的DOM節點：
<p ng-click="hello()">Hi everyone</p>
但是如果不做處理，這裡的ng-click事件並不能實現，因為事件的監聽在靜態html頁面生成時候已經完成。那麼如何給動態產生的元素，綁定事件，實現事件的動態監聽呢？
3 . 透過$compile服務，編譯DOM，實現動態的事件綁定
var template:'<p ng-click="hello()">Hi everyone</p>', var content = $compile(template)(scope);
透過這兩句，首先先編譯DOM，然後用編譯後的DOM加入到之前的靜態節點中，就能實現動態綁定定事件，之類注意，應該注入$compile service
.directive('myText',function($compile){})完整的程式碼如下：
angular.module('myapp',[])
.directive('myText',function($compile){
var template:'<p ng-click="hello()">Hi everyone</p>',
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實作給動態產生的元素綁定事件的方法相關文章請關注PHP中文網！
相關文章：
🎜
