AngularJS  $on、$emit和$broadcast的使用


Posted in Javascript onSeptember 05, 2016

AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的。很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。

那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信。

在AngularJS中还有另外一个选择:通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

  1. $emit只能向parent controller传递event与data
  2. $broadcast只能向child controller传递event与data
  3. $on用于接收event与data

例子如下

html代码

<div ng-controller="ParentCtrl">        <!--父级-->
  <div ng-controller="SelfCtrl">       <!--自己-->
    <a ng-click="click()">click me</a>
    <div ng-controller="ChildCtrl"></div>  <!--子级-->
  </div>
  <div ng-controller="BroCtrl"></div>     <!--平级-->
</div>

js代码

app.controller('SelfCtrl', function($scope) {
  $scope.click = function () {
    $scope.$broadcast('to-child', 'child');
    $scope.$emit('to-parent', 'parent');
  }
});

app.controller('ParentCtrl', function($scope) {
  $scope.$on('to-parent', function(event,data) {
    console.log('ParentCtrl', data);    //父级能得到值
  });
  $scope.$on('to-child', function(event,data) {
    console.log('ParentCtrl', data);    //子级得不到值
  });
});

app.controller('ChildCtrl', function($scope){
  $scope.$on('to-child', function(event,data) {
    console.log('ChildCtrl', data);     //子级能得到值
  });
  $scope.$on('to-parent', function(event,data) {
    console.log('ChildCtrl', data);     //父级得不到值
  });
});

app.controller('BroCtrl', function($scope){ 
  $scope.$on('to-parent', function(event,data) { 
    console.log('BroCtrl', data);     //平级得不到值 
  }); 
  $scope.$on('to-child', function(event,data) { 
    console.log('BroCtrl', data);     //平级得不到值 
  }); 
});

最终结果

ParentCtrl parent

ChildCtrl child

$emit和$broadcast可以传多个参数,$on也可以接收多个参数。

在$on的方法中的event事件参数,其对象的属性和方法如下

 

事件属性 目的
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented 如果调用了`preventDefault`则为true

感觉比service在不同controller中通信要方便许多~~

 以上就是对 AngularJS $on、$emit和$broadcast的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 #Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 #Javascript
Vue表单实例代码
Sep 05 #Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 #Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
深入了解Python enumerate和zip
2020/07/16 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
房地产促销活动方案
2014/03/01 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
会计求职自荐信
2014/06/20 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
公司证明怎么写
2014/09/22 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
小学运动会加油词
2015/07/18 职场文书