1. 程式人生 > >Angular如何給動態生成的元素綁定事件

Angular如何給動態生成的元素綁定事件

con 舉例 pla tex hello 官方 字符串 頁面 get

在AngularJS中,操作DOM一般在指令中完成,事件監聽機制是在對於已經靜態生成的dom綁定事件,而如果在指令中動態生成了DOM節點,動態生成的節點不會被JS事件監聽。

舉例來說:

angular.module(‘myapp‘,[])
.directive(‘myText‘,function(){
 return{
   restrict:‘A‘,
   template:‘<div ng-click="hello()">Hi everyone</div>‘,
   link:function(scope,ele,attr){
   }
 }
})

這個指令中,會生成新的DOM節點:

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

但是如果不做處理,這裏的ng-click事件並不能實現,因為事件的監聽在靜態html頁面生成時候已經完成。那麽如何給動態生成的元素,綁定事件,實現事件的動態監聽呢?

通過$compile服務,編譯DOM,實現動態的事件綁定

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

通過這兩句,首先先編譯DOM,然後用編譯後的DOM加入到之前的靜態節點中,就能實現動態綁定事件,之類註意,應該註入$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); }) }); } } })

另外一個例子:

var myApp = angular.module(‘myApp‘, []);
        myApp.controller(‘MainCtrl‘, [‘$scope‘,‘$compile‘,function($scope, $compile) {
            $scope.count = 0;
            $scope.add = function() {
              if(event.target.tagName.toLowerCase()=="input")return;
                var target=$(event.target);
                $scope.count++;
                target.html($compile("<input  value=‘"+$scope.count+"‘ ng-blur=‘showValue()‘>")($scope));
            }
            $scope.showValue=function(){
                alert(event.target.value)
            }
        }])

註 : 這裏用到了$compile服務,官方的解釋是compile可以將一個HTML字符串或者DOM編譯成模板,該模板能夠與scope鏈接起來,也就是說 直接插入一段html片段到頁面中,雖然能插入進去,但是angular並沒有編譯,所以任何ng事件指令綁定都是無效的,通過compile能夠將 html片段先編譯後再插入。

至此,<AngularJS動態生成的元素綁定事件>目的達到!

Angular如何給動態生成的元素綁定事件