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动态变化的元素绑定事件>目的上!

 

相关文章