AngularJS实现给动态生成的元素绑定事件的方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS实现给动态生成的元素绑定事件的方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1596字,纯文字阅读大概需要3分钟。
内容图文
本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法。分享给大家供大家参考,具体如下:1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法)。
2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听。
举例来说:
angular.module('myapp',[]) .directive('myText',function(){ return{ restrict:'A', template:'<p ng-click="hello()">Hi everyone</p>', link:function(scope,ele,attr){ } } })
这个指令中,会生成新的DOM节点:
<p ng-click="hello()">Hi everyone</p>
但是如果不做处理,这里的ng-click事件并不能实现,因为事件的监听在静态html页面生成时候已经完成。那么如何给动态生成的元素,绑定事件,实现事件的动态监听呢?
3 . 通过$compile服务,编译DOM,实现动态的事件绑定
var template:'<p ng-click="hello()">Hi everyone</p>', var content = $compile(template)(scope);
通过这两句,首先先编译DOM,然后用编译后的DOM加入到之前的静态节点中,就能实现动态绑定事件,之类注意,应该注入$compile service
.directive('myText',function($compile){})
完整的代码如下:
angular.module('myapp',[]) .directive('myText',function($compile){ var template:'<p ng-click="hello()">Hi everyone</p>', return{ restrict:'A', link:function(scope,ele,attr){ ele.on("click", function() { scope.$apply(function() { var content = $compile(template)(scope); element.append(content); }) }); } } })
希望本文所述对大家AngularJS程序设计有所帮助。
更多AngularJS实现给动态生成的元素绑定事件的方法相关文章请关注PHP中文网!
相关文章:
AngularJS实现动态编译添加到dom中的方法
AngularJS动态生成div的ID
AngularJs 动态加载模块和依赖
内容总结
以上是互联网集市为您收集整理的AngularJS实现给动态生成的元素绑定事件的方法全部内容,希望文章能够帮你解决AngularJS实现给动态生成的元素绑定事件的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。