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中已經(jīng)廢除了bind方法）。

2 . 在AngularJS中，操作DOM一般在指令中完成，事件監(jiān)聽機制是在對于已經(jīng)靜態(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頁面生成時候已經(jīng)完成。那么如何給動態(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相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

js為新添加元素添加綁定事件的實例代碼

angular安裝import?echarts?from‘echarts‘標紅報錯解決
這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標紅報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例
這篇文章主要介紹了angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下
2015-07-07
angularjs中$http異步上傳Excel文件方法
本篇文章給大家詳細分析了angularjs中$http異步上傳Excel文件方法，對此有需要的讀者可以學習下。
2018-02-02
angularJs中$scope數(shù)據(jù)序列化的實例
今天小編就為大家分享一篇angularJs中$scope數(shù)據(jù)序列化的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼
本篇文章主要介紹了Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼，具有一定的參考價值，有興趣的可以了解一下
2017-08-08
詳細AngularJs4的圖片剪裁組件的實例
本篇文章主要介紹了詳細AngularJs4的圖片剪裁組件的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
AngularJs 常用的過濾器
本篇文章主要介紹了AngularJs常用的過濾器。具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
Angular 表單控件示例代碼
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請根據(jù)實際業(yè)務需求做相應調(diào)整。
2017-06-06
angular報錯can't resolve all parameters&nb
這篇文章主要介紹了angular報錯can't resolve all parameters for []的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
詳解angular如何調(diào)用HTML字符串的方法
這篇文章主要介紹了詳解angular如何調(diào)用HTML字符串的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06