Angularjs 动态添加指令并绑定事件的方法

这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

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

"; $(this).html(html); $(".newEle").focus(); }); $("body").on("blur",".newEle",function(){ alert($(this).val()); })

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

" ); } $scope.showValue=function(){ alert(event.target.value) } }])

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

")($scope)); } $scope.showValue=function(){ alert(event.target.value) } }])

达到目的~

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小