• $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $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 child

ChildCtrl parent

$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的使用的更多相关文章

  1. angularjs的$on、$emit、$broadcast

    如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...

  2. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  3. AngularJS的学习--$on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...

  4. angularJS 系列(六)---$emit(), $on(), $broadcast()的使用

    下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...

  5. angularjs中控制器之间的通信----$on、$emit和$broadcast解析

    $on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...

  6. angularjs事件传递$on、$emit和$broadcast

    如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...

  7. angularjs事件通信$on,$emit,$broadcast详解

    公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...

  8. angularjs $emit $on $broadcast 父子 兄弟之间传值

    父子之间 <div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"> ...

  9. Angularjs总结(四)$on、$emit和$broadcast的使用

    开发中有时候会需要控制器之间的传值操作:下面几个操作可以达到所需, 注:无平级之间的操作 $emit只能向父 controller传递event与data$broadcast只能向子 controll ...

随机推荐

  1. mysql索引详解,摘自《MySQL 5权威指南》

    本文介绍了数据库索引,及其优.缺点.针对MySQL索引的特点.应用进行了详细的描述.分析了如何避免MySQL无法使用,如何使用EXPLAIN分析查询语句,如何优化MySQL索引的应用.本文摘自< ...

  2. yar

    <?php class Operator { /** * 两数相加 */ public function add($a, $b) { return $this->_add($a, $b); ...

  3. vim替换命令

    转载:http://blog.csdn.net/glorin/article/details/6317098 替換(substitute) :[range]s/pattern/string/[c,e, ...

  4. 高德地图 JavaScript API 开发系列教程(一)

    高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...

  5. XML 格式转JSON 格式

    #import <Foundation/Foundation.h> #pragma GCC diagnostic push #pragma GCC diagnostic ignored & ...

  6. Captcha生成及使用

    @Controller @RequestMapping("/PictureCheckCode") public class ServletController { @Request ...

  7. ubuntu14_pip 安装

    1:install pip python-dev    sudo apt-get install python-dev    sudo apt-get install libevent-dev     ...

  8. plsql设置窗口默认格式

    一:plsql设置窗口默认格式 窗口视图设置完毕后,选择“窗口”菜单——点击“保存”版面. 等到下次重启后,就会呈现保存的版面. OK,设置完毕!

  9. Java计算文件的SHA码和MD5码

    可参考:http://blog.csdn.net/hudashi/article/details/8394158 /** * 计算文件的MD5码 * @param file * @return */ ...

  10. [改善Java代码]不要覆写静态方法

    建议33: 不要覆写静态方法 我们知道在Java中可以通过覆写(Override)来增强或减弱父类的方法和行为,但覆写是针对非静态方法(也叫做实例方法,只有生成实例才能调用的方法)的,不能针对静态方法 ...