这篇文章主要介绍Angularjs如何动态添加指令并绑定事件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
先说使用场景，动态生成DOM元素并绑定事件，非常常见的一种场景，用jq实现效果：
计算
安全
数据库
网络和加速
企业服务
var count=0;
$("#test").on("click",function(event){
if(event.target.tagName.toLowerCase()=="input") return;
count++;
var html="<input type='text' class='newEle' value='"+count+"'/>";
$(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("<input value='"+$scope.count+"' ng-blur='showValue()'>" );
}
$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("<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如何动态添加指令并绑定事件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
