Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果:
http://jsbin.com/gajizuyuju/edit?html,js,output
var count=0;
$("#test").on("click",function(event){
if(event.target.tagName.toLowerCase()=="input") return;
count++;
var html="<input type='text' class='newEle' value='"+count+"'/>";
$(this).html(html);
$(".newEle").focus();
});
$("body").on("blur",".newEle",function(){
alert($(this).val());
})
如果用angularjs应该怎么实现呢?想当然的情况是这样的:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope','$compile',function($scope) {
$scope.count = 0;
$scope.add = function() {
if(event.target.tagName.toLowerCase()=="input")return;
var target=$(event.target);
$scope.count++;
target.html("<input value='"+$scope.count+"' ng-blur='showValue()'>" );
}
$scope.showValue=function(){
alert(event.target.value)
}
}])
理想很丰满,点击test的时候内容确实变成了input,但是input不能绑定任何ng事件。
稍微修改下:http://jsbin.com/zujalapone/edit?html,js,output
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope','$compile',function($scope, $compile) {
$scope.count = 0;
$scope.add = function() {
if(event.target.tagName.toLowerCase()=="input")return;
var target=$(event.target);
$scope.count++;
target.html($compile("<input value='"+$scope.count+"' ng-blur='showValue()'>")($scope));
}
$scope.showValue=function(){
alert(event.target.value)
}
}])
达到目的~
这里用到了$compile服务,官方的解释是compile可以将一个HTML字符串或者DOM编译成模板,该模板能够与scope链接起来,也就是说直接插入一段html片段到页面中,虽然能插入进去,但是angular并没有编译,所以任何ng事件指令绑定都是无效的,通过compile能够将html片段先编译后再插入。
Angularjs 动态添加指令并绑定事件的更多相关文章
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery中如何给动态添加的元素绑定事件
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- jQuery对 动态添加 的元素 绑定事件(on()的用法)
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
随机推荐
- Memcached服务安装
安装Memcached服务 memcache分为服务端和客户端程序 服务端程序用来支持存储k-v值,程序名称memcached 客户端与服务端通信,进行存取值(常用的如php的memcache扩展,m ...
- BZOJ 4085:[Sdoi2015]quality(round 2 音质检测)(数据结构)
居然在考场上把这道题打出来了觉得自己也是有点吊啊(虽然后面就没时间做其他题了囧而且还被卡常数了...) 题解自己写了一份TEX的就直接放上来吧.... 好啦,在谈点什么别的 什么?你在bz上TLE了? ...
- java中使用正则表达式匹配字符串
在Java中使用正则表达式去匹配相应的字符串: String importFileRole = "(import)\\s*[a-zA-Z0-9_<>.]+\\;";// ...
- js文字滚动效果实现
纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...
- 【转】Netty系列之Netty并发编程分析
http://www.infoq.com/cn/articles/netty-concurrent-programming-analysis
- Python入门教程(1)
人生苦短,我用Python! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于19 ...
- RunTime.getRuntime().exec()运行脚本命令介绍和阻塞
java在企业级项目开发中,无论是强制性的功能需要,还是为了简便java的实现,需要调用服务器命令脚本来执行.在java中,RunTime.getRuntime().exec()就实现了这个功能. ...
- Java IO之File和IO
本系列我们主要总结一下Java中的IO.NIO以及NIO2. java.io.File 学习Java IO,首先让我们来了解File类吧,它是文件和目录路径名的抽象表示形式.因此你千万别误会File类 ...
- 聊聊"jQuery is not defined"
KiwenLau同学在他的个人博客使用了Fundebug的JavaScript错误监控插件,然后偶尔会收到jQuery is not defined这样的错误报警: 他的博客使用了Staticfile ...
- wemall app商城源码中ScrollView中嵌套ListView主要代码
很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...