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事件可以给 ...
随机推荐
- 初学者必看:精心整理的Javascript操作JSON总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
- 几个STL算法:includes,set_difference、set_intersection、set_symmetric_difference、set_union, pre_permutation, next_permutation
includes: 测试有序序列中是否包含另一个序列的全部元素. template<class inputIterator1, class inputIterator2> bool inc ...
- 使用jekyll主题
github上面有很多基于jekyll的主题 https://github.com/theme4jekyll 使用起来也非常方便.直接clone到本地 这些主题,包括了很多模板,在新建博客的时候可以在 ...
- 蘑菇街2015校招技术类笔试题A卷,回忆版(杭州站)
笔试时间:10月9号 下午 1.一串数据的最大递增序列,输出个数 例如 4,2, 6,3, 1,5, 最大递增序列为, 2,3, 5,输出3, 2.求两个整型数据集合的交集,尽可能少用时间. 假设两个 ...
- checkbox选中问题
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- WordPress教程之判断文章所属分类函数in_category、is_category
最近自己在修改一个采用Wordpress程序的博客的时候需要用到一个特殊的功能:我需要判断这篇文章是属于哪些分类,如果属于我设定的分类下的文章,则输出一个DIV内容.按道理说实现这个功能应该不算太难, ...
- jQuery_基础
一.jQuery与DOM对象的转换. 1.jQuery对象转换为DOM对象:$cr[0] 或 $cr.get(0) $cr为jQuery对象 2.DOM对象转换为jQuery对象:$(cr) cr为D ...
- C# Url编码 HtmlUrl编码
今天看了Artwl的一片关于编码的文章,感觉写的非常好,而且人家那博客园的样式都比哥的好看得多,一幕了然,尤其是那黑色背景的H1,妈个B了,哥太喜欢了.既然如果,就来就着它的文章跟样式,顺便来总结一下 ...
- haproxy nginx 多路径
nginx 多路径: location / { root /t/deploy/zjdev/deployedApps/zjzc-web-frontEnd/; index index.html index ...
- Android APK安装包瘦身[转]
很显然,APK安装包越小越好.下面从代码,资源文件,使用策略几个方面简要介绍下: 代码 保持良好的编程习惯,不要重复或者不用的代码,谨慎添加libs,移除使用不到的libs. 使用proguard混淆 ...