今天在开发时,遇到一个坑,花了一下午时间也没找到原因,无奈小菜鸟只能寻求公司里大牛的帮助,果然,大牛就是大牛,对比了几个输出结果,就看出问题所在。所以小菜鸟当然不会错过这个分享的时机啦~废话不多说进入正题:

在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之事件绑定、解除事件绑定的更多相关文章

  1. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  2. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

  3. [原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  4. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  5. jq 绑定事件和解绑事件

    <!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...

  6. JS 事件绑定、事件监听、事件委托详细介绍

    原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...

  7. 域对象中属性变更及感知session绑定的事件监听器

    域对象中属性的变更的时间监听器就是用来监听ServletContext,HttpSession,HttpServletRequest这三个对象中的属性变更信息事件的监听器.这三个监听器接口分别是Ser ...

  8. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  9. JS 中的事件绑定、事件监听、事件委托是什么?

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...

随机推荐

  1. 黄聪:WordPress 多站点建站教程(一):怎样开启WordPress多站点功能,实现手机移动端主题开发,与主站用户数据共享

    为了开发手机移动端的wordpress,需要使用Wordpress的多站点功能. 1.打开WordPress根目录下的wp-config.php文件, 在文件的任何位置加上以下内容: define(' ...

  2. Java 基于UDP的类似于QQ的循环通信

    package Day10; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetS ...

  3. C++ 函数特性_函数重载

    函数重载 在相同作用域内 用同一函数名定义的多个函数: 参数个数和参数类型不同 int getMax(int x,int y,int z) // 函数名相同都是 getMax() { // to do ...

  4. Bootstrap-CL:分页

    ylbtech-Bootstrap-CL:分页 1.返回顶部 1. Bootstrap 分页 本章将讲解 Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootst ...

  5. Bootstrap-CL:导航元素

    ylbtech-Bootstrap-CL:导航元素 1.返回顶部 1. Bootstrap 导航元素 本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 . ...

  6. 【HDU】4352 XHXJ's LIS(数位dp+状压)

    题目 传送门:QWQ 分析 数位dp 状压一下现在的$ O(nlogn) $的$ LIS $的二分数组 数据小,所以更新时直接暴力不用二分了. 代码 #include <bits/stdc++. ...

  7. OpenMP Hello World

    ▶ OpenMP 环境配置,第一个程序 ▶ OpenMP 在Visual Studio 2015 中的配置 ● VS项目属性右键,属性,C/C++,语言,OpenMP支持,选择是(/openmp). ...

  8. python中字典的比较

    今天碰到一个字典比较的问题,就是比较两个字典的大小,其实这个用的不多,用处也没多少,但是还是记录一下. 字典的比较顺序如下: 1.先比较字典的元素的个数,那个多,就哪个大: 2.比较字典的键,在比较字 ...

  9. Cordova+Vue构建Hybrid APP简易实操

    当下APP市场,因为Native APP开发成本高,Web APP不稳定,混合开发APP大行其道,成为越来越多开发者的首选.Hybrid APP开发框架也比较多,Weex.Ionic.PhoneGap ...

  10. C++Builder 代码编辑器 回车自动补充括弧

    两大问题 括弧和折叠 一.括弧 XE7,回车,自动补充括弧} 好用,有时候不准确,代码量多,不知道什么原因就引起错误,总是多一个括弧,一回车就加一个括弧,都不敢回车写代码了,怎么关闭此选项? 找到了, ...