本篇文章主要介绍了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 动态添加指令并绑定事件的方法的详细内容，更多请关注易知道|edz.cc其它相关文章！
