angularjs之事件绑定、解除事件绑定
今天在开发时,遇到一个坑,花了一下午时间也没找到原因,无奈小菜鸟只能寻求公司里大牛的帮助,果然,大牛就是大牛,对比了几个输出结果,就看出问题所在。所以小菜鸟当然不会错过这个分享的时机啦~废话不多说进入正题:
在angular开发时,会把整体分解成各个功能块,然后使用自定义指令directive或者service或者factory,总之想尽办法再给组合在一起,所以问题来了~
比如:往一个页面添加元素(按钮?等等),此时点击添加的按钮在directive1里,而元素的添加又在directive2里,所以要怎么通讯呢,我选择了事件的方式:
directive1 有代码如下:
$scope.insertWidget = function(type){
$rootScope.$emit("widget.insert",type);
};
directive2 有代码如下:
$rootScope.$on("widget.insert",function($event,type){
//功能代码
});
当然这是有问题的。
当directive2里的scope被destroy的时候,它绑定的事件并没有解除,因为绑定在$rootScope下了,所以当我再次操作时,事件会累加,导致再次刷新该页面的时候,widget.insert事件累积了两次,(以此累积)。
在我今天要完成的功能里就造成了影响,因为我是每添加一个元素会有$modal.open的操作,所以这样我去关闭这个modal会累积关闭几个,如果不解除的话。
所以解决方法是:
$on事件会返回一个函数,只要在当前scope被destroy时,执行这个函数就好了~见代码:
var destroyInsert = $rootScope.$on("widget.insert",function($event,type){
//功能代码
});
$scope.$on("$destroy",function(){
destroyInsert();
});
今天遇到的这个坑就解决啦~
angularjs之事件绑定、解除事件绑定的更多相关文章
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- [原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- jq 绑定事件和解绑事件
<!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- 域对象中属性变更及感知session绑定的事件监听器
域对象中属性的变更的时间监听器就是用来监听ServletContext,HttpSession,HttpServletRequest这三个对象中的属性变更信息事件的监听器.这三个监听器接口分别是Ser ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- JS 中的事件绑定、事件监听、事件委托是什么?
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...
随机推荐
- hBuilder培训资源视频教程汇总
DCloud对开发者的学习支持分3个层面:官方文档.三方专业培训.网友经验分享 DCloud的精力主要在做产品,配套的文档也会一直完善好.但专业的培训还不是DCloud能做好的,在HTML5中国产业联 ...
- PSI分析
"SI是对多个TS流的描述,它包含了PSI" PSI只提供了单个TS流的信息,使接收机能够对单个TS流中的不同节目进行解码:但是,它不能提供多个TS流的相关业务,也不能提供节目的类 ...
- Java-Runoob-高级教程-实例-环境设置实例:2.Java 实例 – Java 如何运行一个编译过的类文件?
ylbtech-Java-Runoob-高级教程-实例-环境设置实例:2.Java 实例 – Java 如何运行一个编译过的类文件? 1.返回顶部 1. Java 实例 - 如何执行编译过 Java ...
- JVM实例以及内存的分配机制
JVM:一台用来模拟计算机执行计算指令的虚拟计算机,拥有自己的指令,指令执行环境,虚拟内存等. 下面介绍虚拟机(JVM)--cpu,寄存器,内存,指令 ======================== ...
- Python 中的属性访问与描述符
在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个name属性,那便可以使用foo.name对此属性进行访问.一般而言,点(. ...
- 初尝微信小程序开发与实践
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...
- 全面解析python类的绑定方法与非绑定方法
类中的方法有两类: 绑定方法 非绑定方法 一.绑定方法 1.对象的绑定方法 首先我们明确一个知识点,凡是类中的方法或函数,默认情况下都是绑定给对象使用的.下面,我们通过实例,来慢慢解析绑定方法的应用. ...
- python的with用法(参考)
一.With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中 ...
- Go语言优势与劣势
Go语言的优势: 1.脚本化的语法:开发效率高,容易上手 2.静态类型+编译型,程序运行速度有保障:静态类型+编译型语言相对于动态类型+解释型语言的效率高 3.原生的支持并发编程:降低开发.维护成本/ ...
- VsCode中vim插件剪切板等问题
剪切板共享 这个挺重要的,否则每次右键菜单复制粘贴会奔溃的. 在用户设置中添加: "vim.useSystemClipboard": true, 光标的变化 我觉得这个也重要,毕竟 ...