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 相关文章推荐
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
PHP图片库imagemagick安装方法
2014/09/23 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
为什么会有内存对齐
2016/10/10 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
安全教育演讲稿
2014/05/09 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
2014年度培训工作总结
2014/11/27 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python