AngularJS中,如何给动态生成的元素绑定事件
来源:互联网 发布:为什么mac连接不上wifi 编辑:程序博客网 时间:2024/05/01 13:11
1 . 我们知道在jquery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法)。
2 . 在angularjs中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听。
举例来说:
angular.module('myapp',[]).directive('myText',function(){ return{ restrict:'A', template:'<div ng-click="hello()">Hi everyone</div>', link:function(scope,ele,attr){ } }})
这个指令中,会生成新的DOM节点:
<div ng-click="hello()">Hi everyone</div>
但是如果不做处理,这里的ng-click事件并不能实现,因为事件的监听在静态html页面生成时候已经完成。那么如何给动态生成的元素,绑定事件,实现事件的动态监听呢?
3 . 通过$compile服务,编译DOM,实现动态的事件绑定
var template:'<div ng-click="hello()">Hi everyone</div>',var content = $compile(template)(scope);
通过这两句,首先先编译DOM,然后用编译后的DOM加入到之前的静态节点中,就能实现动态绑定事件,之类注意,应该注入$compile service
.directive('myText',function($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); }) }); } }})
1 1
- AngularJS中,如何给动态生成的元素绑定事件
- jQuery:如何给动态生成的元素绑定事件?
- jQuery:如何给动态生成的元素绑定事件?
- jQuery:如何给动态生成的元素绑定事件?
- jQuery:如何给动态生成的元素绑定事件?
- 第24篇:AngularJS实现给动态生成的元素绑定事件的方法
- JQuery给动态生成的DOM元素绑定点击事件
- js关于给动态生成的元素绑定事件
- Jquery中动态的给元素绑定事件
- 如何使用Jquery给动态生成的控件绑定事件
- 给动态添加的元素绑定事件
- jquery mobile中动态生成元素的事件绑定
- jquery动态生成的元素绑定事件
- js动态生成的元素绑定事件
- jQuery学习笔记之给动态生成元素绑定事件
- jQuery使用on()方法给动态生成元素绑定事件
- 关于jquery 的绑定事件on 如何绑定动态生成的dom元素
- 怎样给jQuery动态附加新的元素?那么怎样给新生成的元素绑定事件呢?
- Quazip的使用
- ubuntu 上运行 py-faster-rcnn
- ***修改eclipse 代码错误提示级别
- ajax,json,php之间的数据传输
- hdu 1009 FatMouse' Trade
- AngularJS中,如何给动态生成的元素绑定事件
- C#控制台 gettype()与gettypecode()的区别
- 二分元素第一次出现的位置和最后一次出现的位置
- 欢迎使用CSDN-markdown编辑器
- NOI openjudge 8436:Saving Tang Monk
- JDBC六部曲
- Windows 7操作系统Git安装教程--学习总结
- VC中CEdit过滤输入字符与限制输入字符长度
- Android中Hook Instrumentation的一些思考