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的模仿新浪微博时间的组件
Oct 04 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
JS变量提升原理与用法实例浅析
May 22 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
面试中canvas绘制图片模糊图片问题处理
Mar 13 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 preg_replace替换实例讲解
2013/11/04 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php实现socket推送技术的示例
2017/12/20 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Python微信库:itchat的用法详解
2017/08/14 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python中upper是做什么用的
2020/07/20 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
史上最牛辞职信
2015/05/13 职场文书
与死神共舞观后感
2015/06/15 职场文书
单身证明范本
2015/06/15 职场文书
门卫管理制度范本
2015/08/05 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python