AngularJS如何给动态添加的DOM中绑定事件
正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿主 DOM 对象(即加入了 ng-click 指令的 DOM 对象)绑定在当前作用域内了。
换言之,当前作用域知道有这个绑定了 ng-click 的 DOM 对象存在,所以 ng-click 才会起作用。
而在你的例子里,HTML 片段是在 compiling phase 后动态插入到 DOM 树中的,即便你写了 ng-click,当前的作用域也不知道这个指令的存在,所以才会无效。
因此,当你动态插入 HTML 片段的时候,要手动调用 $compile 服务并将这个 DOM 对象绑定给当前的作用域(或其他可见作用域,这要看你的应用逻辑了),具体方法如下:
// 在某一个 controller 中,假设用 jQuery 动态插入一个 HTML 片段……
$('selector').html(
$compile(
'<button ng-click="submitForm()">' + 'Submit' + '</button>'
)(scope)
);
注意要先注入 $compile 服务。
另外,这种方式明显太“恶心”,还有一个更好的办法(但是大量动态插入会有性能损耗)就是利用 ng-repeat 指令,举个例子:
<!-- 在要动态插入的地方…… -->
<div class="form-control" ng-repeat="fragment in fragments">
<button ng-click="submitForm()">{{fragment.text}}</button>
</div>
这里的 fragments 就是一个空数组(初始状态),所以一开始这里 ng-repeat 不会有任何作用,然后你写一个方法来触发动态插入的动作,把一个类似 { text: 'Submit' } 这样的对象 push 到这个空数组中,ng-repeat 就会“帮”你把 DOM 对象插入了,并且 ng-repeat 本身就会重新 compile 内涵的 DOM 对象,因此 ng-click 会如你所愿的生效。
以上两个例子里我都去掉了你的 submit-form 指令,因为没有必要。如果你要把它写成指令,那么你应该学习ng-repeat 的方法,简单的说就是监视一个 expression(比如 item in items),当 items 变化的时候,重新 compile 内涵的 HTML 模版。
AngularJS如何给动态添加的DOM中绑定事件的更多相关文章
- jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...
- 动态添加的html元素绑定事件的方法
避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...
- jq动态添加的元素触发绑定事件无效
<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...
- JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
- jQuery给动态添加生成的元素绑定事件的方法
<div id="testdiv"> <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...
- js动态添加的元素不能绑定事件
动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})
- Jquery为动态添加的未来元素绑定事件
语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...
- 动态生成的dom元素绑定事件
要求:要绑定到父元素上$(".school_Inlists").on("click",".chose_Inbtn",function(){ ...
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
随机推荐
- TCP/UDP网络编程的基础知识与基本示例(windows和Linux)
一.TCP编程的一般步骤 服务器端: 1.创建一个socket,用函数socket() 2.绑定IP地址.端口等信息到socket上,用函数bind() 3.开启监听,用函数listen() 4.接收 ...
- oracle 时间比较查询
select * from table where add_time>=to_date('2015/01/03','yyyy/mm/dd')
- Python学习(六) Python数据类型:字典(重要)
字典dict: 字典其实就相当于java里面的Map,用来存储键值对的.其中存储的数据时无序的. 假如有这样的数据: t1=['name','age','sex'] t2=['tom',30,'mal ...
- C语言数据类型转换
变量的数据类型是可以转换的.转换的方法有两种,一种是自动转换,一种是强制转换. 自动转换 自动转换发生在不同数据类型的量混合运算时,由编译系统自动完成.自动转换遵循以下规则: 若参与运算量的类型不同, ...
- 关于VMWARE虚拟机安装GHOST版XP后不能硬盘启动问题
工具: VMware Workstation 9.0 Ghost xp sp3 中英 双语版 现象:建立硬盘分区,设置活动分区...ghost安装顺利,安装完成后不能硬盘启动,如果从硬盘启动则黑屏,出 ...
- build.gradle中引入jar
只需在 dependencies{}中添加: compile fileTree(include: ['*.jar'], dir: 'libs')
- Erlang千万级用户游戏框架(Openpoker)源码文件分析清单
openpoker源码 erlang写的网游服务器源码,OpenPoker是一个大型多人扑克网游,内建支持了容错能力,负载平衡和无限制的规模大小.本文是openpoker源码文件功能的一个清单式说明: ...
- CentOS、Ubuntu、Debian三个linux比较异同
Linux有非常多的发行版本,从性质上划分,大体分为由商业公司维护的商业版本与由开源社区维护的免费发行版本. 商业版本以Redhat为代表,开源社区版本则以debian为代表.这些版本各有不同的特点, ...
- tc令牌桶限速心得
一.实验拓扑与实验现象 实验拓扑如图所示,在①号机上发送数据,③号机上接受数据,同时在④号机的eth1与eth2网口限制速率为115200kbps,命令如下 tc qdisc add dev eth1 ...
- 微型 Python Web 框架 Bottle - Heroin blog
微型 Python Web 框架 Bottle - Heroin blog 微型 Python Web 框架 Bottle