在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听。
使用$compile服务,将死模板转换成为带有绑定事件的模板,从而实现动态绑定。
var template:'<div ng-click="hello()">Hi everyone</div>',
var content = $compile(template);
自定义指令,动态绑定事件,注入$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);
})
});
}
}
})