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 相关文章推荐
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
js对象的复制继承实例
Jan 10 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
ES6基础之默认参数值
Feb 21 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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
php伪静态之APACHE篇
2014/06/02 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
接收键盘指令的脚本
2006/06/26 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python处理按钮消息的实例详解
2017/07/11 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python3使用GUI统计代码量
2019/09/18 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
预备党员承诺书
2014/03/25 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
消防安全宣传口号
2014/06/10 职场文书
转让协议书范本
2014/09/13 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
施工员岗位职责
2015/02/10 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL