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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
详解Vue方法与事件
Mar 09 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
vue 自动化路由实现代码
Sep 03 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Django数据统计功能count()的使用
2020/11/30 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
创文明城市标语
2014/06/16 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
《月光曲》教学反思
2016/02/16 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python