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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
vue请求数据的三种方式
Mar 04 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
js 提交和设置表单的值
2008/12/19 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
10分钟学会js处理json的常用方法
2020/12/06 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python语言使用技巧分享
2016/05/31 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
linux面试题参考答案(10)
2013/11/04 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
综治工作心得体会
2014/09/11 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年学校工作总结
2014/11/20 职场文书
英语教师个人工作总结
2015/02/09 职场文书
入党心得体会
2019/06/20 职场文书