AngularJS实现给动态生成的元素绑定事件的方法


Posted in Javascript onDecember 14, 2016

本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法。分享给大家供大家参考,具体如下:

1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法)。

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

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

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
layui表格数据重载
Jul 27 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
Bootstrap导航条的使用和理解3
Dec 14 #Javascript
jQuery学习笔记之入门
Dec 14 #Javascript
Bootstrap轮播图的使用和理解4
Dec 14 #Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 #Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 #Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 #Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 #Javascript
You might like
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
js使用心得分享
2015/01/13 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
python和go语言的区别是什么
2020/07/20 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
互动出版网:专业书籍
2017/03/21 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
中文师范生自荐信
2014/01/30 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
MySQL分库分表详情
2021/09/25 MySQL