在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页面生成时候已经完成。那么如何给动态生成的元素,绑定事件,实现事件的动态监听呢?

通过$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);
})
});
}
}
})

另外一个例子:

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动态生成的元素绑定事件>目的达到!

Angular如何给动态生成的元素绑定事件的更多相关文章

  1. jQuery:如何给动态生成的元素绑定事件?

    jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在. 然而, ...

  2. Angularjs给动态生成的元素绑定事件

    //获取动态生成的元素 getJqforAnguar:function(jqid){ angular.element(document).injector().invoke(function($com ...

  3. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  4. Jquery 动态生成的元素绑定事件

    使用 on方法 $("#id1").on("click","#id2",function(){}) 这里要注意的是#id1必须是原来就存在的 ...

  5. [jquery] 给动态生成的元素绑定事件 on方法

    用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(documen ...

  6. 用jquery动态生成的元素绑定事件

    $(document).on("click",".class a",function(){ })

  7. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  8. jq给动态生成的标签绑定事件的几种方法

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...

  9. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

随机推荐

  1. jquery prop attr

    checked比较特殊,只要设置了属性checked,不管何值都是checked的.例如:<input type="checkbox" checked><inpu ...

  2. python web框架 Django的APP以及目录介绍 2

    app: migrations 数据修改表结构 admin Django为我们提供的后台管理 apps 配置当前app models ORM,写指定的类 通过命令可以创建数据库结构 tests 单元测 ...

  3. C#建WindowForm调用R可视化

    众所周知R软件功能非常强大,可以很好的进行各类统计,并能输出图形.下面介绍一种R语言和C#进行通信的方法,并将R绘图结果显示到WinForm UI界面上的方法,文中介绍的很详细,需要的朋友可以参考下. ...

  4. 前端黑客之XSS、CSRF

    XSS:跨站脚本,发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中出现了不被预期的脚本指令并执行时,XSS就会发生. 绝大多数XSS攻击都会采用嵌入一段远程或者第三方域 ...

  5. python web中的文件上传与下载

    django 框架下 实现服务端的文件上传与下载: import jsonimport osimport uuid def attachment_upload(request): "&quo ...

  6. Spring框架第六篇之Spring与DAO

    一.Spring与JDBC模板 1.搭建环境 首先导入需要的jar包: 以上jar中多导入了DBCP和C3P0的jar包,因为这里需要演示怎么配置多种数据源,所以导入了这两个包,在实际开发中无需导入这 ...

  7. vultr服务器上搭建PHP运行环境-centos7

    安装nginx: yum install nginx 开启Nginx systemctl start nginx 访问你的域名或者ip 例如:quantaedu.com 安装PHP 查看系统版本lsb ...

  8. [Python] logging.logger

    <1>. mylogger = logging.getLogger("abc") logging.debug()/logging.info()/logging.warn ...

  9. 自动填写IE的网页的输入框的内容

    procedure TForm1.PutData; var ShellWindow: IShellWindows; nCount: integer; spDisp: IDispatch; i,j,X: ...

  10. 001-搭建spring boot项目

    1.第一步.file--new--project. 2.spring initializr--project sdk--default--next 3. 4.spring boot--选择依赖项--n ...