Angularjs如何动态添加指令并绑定事件

这篇文章主要介绍Angularjs如何动态添加指令并绑定事件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

为泾川等地区用户提供了全套网页设计制作服务，及泾川网站建设行业解决方案。主营业务为成都网站建设、成都网站设计、泾川网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

先说使用场景，动态生成DOM元素并绑定事件，非常常见的一种场景，用jq实现效果：

var count=0;
$("#test").on("click",function(event){
 if(event.target.tagName.toLowerCase()=="input") return;
 count++;
 var html="";
 $(this).html(html);
 $(".newEle").focus();
});
$("body").on("blur",".newEle",function(){
 alert($(this).val());
})

如果用angularjs应该怎么实现呢？想当然的情况是这样的：

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

理想很丰满，点击test的时候内容确实变成了input，但是input不能绑定任何ng事件。

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("")($scope));
      }
      $scope.showValue=function(){
        alert(event.target.value)
      }
    }])

达到目的~

这里用到了$compile服务，官方的解释是compile可以将一个HTML字符串或者DOM编译成模板，该模板能够与scope链接起来，也就是说直接插入一段html片段到页面中，虽然能插入进去，但是angular并没有编译，所以任何ng事件指令绑定都是无效的，通过compile能够将html片段先编译后再插入。

以上是“Angularjs如何动态添加指令并绑定事件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！