Angularjs动态添加指令并绑定事件的⽅法
这两天学习了angularjs 感觉指令这个地⽅知识点挺多的，⽽且很重要，所以，今天添加⼀点⼩笔记。
先说使⽤场景，动态⽣成DOM元素并绑定事件，⾮常常见的⼀种场景，⽤jq实现效果：
var count=0;
$("#test").on("click",function(event){
if(event.LowerCase()=="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());
blur事件})
如果⽤angularjs应该怎么实现呢？想当然的情况是这样的：
var myApp = dule('myApp', []);
$unt = 0;
$scope.add = function() {
if(event.LowerCase()=="input")return;
var target=$(event.target);
$unt++;
target.html("<input value='"+$unt+"' ng-blur='showValue()'>" );
}
$scope.showValue=function(){
alert(event.target.value)
}
}])
理想很丰满，点击test的时候内容确实变成了input，但是input不能绑定任何ng事件。
var myApp = dule('myApp', []);
$unt = 0;
$scope.add = function() {
if(event.LowerCase()=="input")return;
var target=$(event.target);
$unt++;
target.html($compile("<input value='"+$unt+"' ng-blur='showValue()'>")($scope));
}
$scope.showValue=function(){
alert(event.target.value)
}
}])
达到⽬的~
这⾥⽤到了服务，官⽅的解释是compile可以将⼀个HTML字符串或者DOM编译成模板，该模板能够与
scope链接起来，也就是说直接插⼊⼀段html⽚段到页⾯中，虽然能插⼊进去，但是angular并没有编译，所以任何ng事件指令绑定都是⽆效的，通过compile能够将html⽚段先编译后再插⼊。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。