正常情况(即非动态插入 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中绑定事件的更多相关文章

  1. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  2. 动态添加的html元素绑定事件的方法

    避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...

  3. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  4. JS动态添加的标签无法绑定事件解决方案~~~

    今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...

  5. jQuery给动态添加生成的元素绑定事件的方法

    <div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...

  6. js动态添加的元素不能绑定事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  7. Jquery为动态添加的未来元素绑定事件

    语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...

  8. 动态生成的dom元素绑定事件

    要求:要绑定到父元素上$(".school_Inlists").on("click",".chose_Inbtn",function(){ ...

  9. 关于动态添加的html元素绑定的事件不生效的解决办法

    1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...

随机推荐

  1. 初学者必看:精心整理的Javascript操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  2. 几个STL算法:includes,set_difference、set_intersection、set_symmetric_difference、set_union, pre_permutation, next_permutation

    includes: 测试有序序列中是否包含另一个序列的全部元素. template<class inputIterator1, class inputIterator2> bool inc ...

  3. 使用jekyll主题

    github上面有很多基于jekyll的主题 https://github.com/theme4jekyll 使用起来也非常方便.直接clone到本地 这些主题,包括了很多模板,在新建博客的时候可以在 ...

  4. 蘑菇街2015校招技术类笔试题A卷,回忆版(杭州站)

    笔试时间:10月9号 下午 1.一串数据的最大递增序列,输出个数 例如 4,2, 6,3, 1,5, 最大递增序列为, 2,3, 5,输出3, 2.求两个整型数据集合的交集,尽可能少用时间. 假设两个 ...

  5. checkbox选中问题

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  6. WordPress教程之判断文章所属分类函数in_category、is_category

    最近自己在修改一个采用Wordpress程序的博客的时候需要用到一个特殊的功能:我需要判断这篇文章是属于哪些分类,如果属于我设定的分类下的文章,则输出一个DIV内容.按道理说实现这个功能应该不算太难, ...

  7. jQuery_基础

    一.jQuery与DOM对象的转换. 1.jQuery对象转换为DOM对象:$cr[0] 或 $cr.get(0) $cr为jQuery对象 2.DOM对象转换为jQuery对象:$(cr) cr为D ...

  8. C# Url编码 HtmlUrl编码

    今天看了Artwl的一片关于编码的文章,感觉写的非常好,而且人家那博客园的样式都比哥的好看得多,一幕了然,尤其是那黑色背景的H1,妈个B了,哥太喜欢了.既然如果,就来就着它的文章跟样式,顺便来总结一下 ...

  9. haproxy nginx 多路径

    nginx 多路径: location / { root /t/deploy/zjdev/deployedApps/zjzc-web-frontEnd/; index index.html index ...

  10. Android APK安装包瘦身[转]

    很显然,APK安装包越小越好.下面从代码,资源文件,使用策略几个方面简要介绍下: 代码 保持良好的编程习惯,不要重复或者不用的代码,谨慎添加libs,移除使用不到的libs. 使用proguard混淆 ...