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:&#39;<p ng-click="hello()">Hi everyone</p>&#39;,
    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中文網！

相關文章：

AngularJS實作動態編譯加入dom的方法

AngularJS動態產生div的ID

AngularJS動態產生div的ID

🎜