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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
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实现WEB动态网页静态
2006/10/09 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
拖动一个HTML元素
2006/12/22 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
家长写给孩子的评语
2014/04/18 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
学习委员竞选稿
2015/11/20 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS