1 . 我們知道在jquery中,動態生成一個元素,如果要在動態生成元素的同時,動態繫結事件,可以通過live/on方法(在jquery3.0中已經廢除了bind方法)。
2 . 在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頁面生成時候已經完成。那麼如何給動態生成的元素,繫結事件,實現事件的動態監聽呢?

3 . 通過$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);
               })
            });
        }
    }
})
.