快捷導(dǎo)航

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

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

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

本文實(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)綁定事件，可以通過(guò)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)聽。

舉例來(lái)說(shuō)：

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頁(yè)面生成時(shí)候已經(jīng)完成。那么如何給動(dòng)態(tài)生成的元素，綁定事件，實(shí)現(xiàn)事件的動(dòng)態(tài)監(jiān)聽呢？

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

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

通過(guò)這兩句，首先先編譯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ì)有所幫助。

您可能感興趣的文章: