AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法

更新時間：2016年12月14日 08:47:29 作者：小小小小小亮

這篇文章主要介紹了AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法,結合實例形式分析了AngularJS動態(tài)生成元素與事件綁定相關操作技巧,需要的朋友可以參考下

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

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

2 . 在AngularJS中，操作DOM一般在指令中完成，事件監(jiān)聽機制是在對于已經靜態(tài)生成的dom綁定事件，而如果在指令中動態(tài)生成了DOM節(jié)點，動態(tài)生成的節(jié)點不會被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){
    }
  }
})

這個指令中，會生成新的DOM節(jié)點：

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

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

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

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

通過這兩句，首先先編譯DOM，然后用編譯后的DOM加入到之前的靜態(tài)節(jié)點中，就能實現(xiàn)動態(tài)綁定事件，之類注意，應該注入$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程序設計有所幫助。

您可能感興趣的文章: