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

在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動態生成的元素綁定事件>目的達到!