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);
       })
     });
   }
 }
})

除此以外2个例证:

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动态变化的因素绑定事件>目标达到!

 

相关文章