• $emit只能向parent controller传递event与data( $emit(name, args) )
  • $broadcast只能向child controller传递event与data( $broadcast(name, args) )
  • $on用于接收event与data( $on(name, listener) )
<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:

var app = angular.module('myApp', []);
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); //平级得不到值
});
});

点击click运行结果:

ChildCtrl child controller.
ParentCtrl parent

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

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

Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on的更多相关文章

  1. 通过$broadcast或$emit在子级和父级controller之间进行值传递

    通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...

  2. [转]MFC子线程中更新控件内容的两种办法

    一.概述 每个系统中都有线程(至少都有一个主线程),而线程最重要的作用就是并行处理,提高软件的并发率.针对界面来说,还能提高界面的响应能力.一般的,为了应用的稳定性,在数据处理等耗时操作会单独在一个线 ...

  3. angular中控制器之间传递参数的方式

    在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其 ...

  4. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  5. 通过拦截器Interceptor实现Spring MVC中Controller接口访问信息的记录

    java web工程项目使用了Spring+Spring MVC+Hibernate的结构,在Controller中的方法都是用于处理前端的访问信息,Controller通过调用Service进行业务 ...

  6. 程序中使用log4J打印信息的两种方式

    (1)通过org.apache.commons.logging.Log 接口实例化: public static Log log = LogFactory.getLog(String name); p ...

  7. angular中控制器之间的通讯方式

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  8. angular中$location读取url信息

    读取url信息: <html ng-app="myApp"> <head> <title>angularjs-demo</title> ...

  9. Android中Activity之间的数据传递

    在开发中,我们经常涌用到Activity,那么既然用到了Activity,就一定免不了在两个或者多个Activity之间传递数据.这里我们先说一说原理,然后在看看代码和例子. 情况A:我们需要从Act ...

随机推荐

  1. 域名变更后获取cookie

    有个朋友问我,域名更换后怎么获取原有域名下的cookie,当时第一反应是域名都不存在还怎么获取cookie. 后面想想似乎是可以的,使用新域名后可以保留原有域名,通过jsonp或iframe跨域获取原 ...

  2. Python读写Json文件

    一个小例子,使用Json配置文件 # -*- coding: utf-8 -*- import json import time def store(data): with open('data.js ...

  3. QT---线程间通信(要先编译libqt-mt.so?)

    在 Qt 系统中,运行着一个GUI 主事件线程,这个主线程从窗口系统中获取事件,并将它们分发到各个组件去处理.在 QThread 类中有一种从非主事件线程中将事件提交给一个对象的方法,也就是 QThr ...

  4. C# 根据URL返回HTML_根据URL获取图片信息/缩略图

    /// <summary> /// 根据URL 返回HTML /// </summary> private List<string> GetHtmlByUrl(st ...

  5. excel内容转成xml

    简单记录下如何将excel中的一个表格内容转成xml格式的文件. excel菜单栏中的"开发工具"下有专门处理xml的模块,如下图. 如果你的excel中看不到"开发工具 ...

  6. 类linux系统/proc/sysrq-trigger文件功能作用

    立即重启计算机      echo "b" > /proc/sysrq-trigger 立即关闭计算机      echo "o" > /proc/ ...

  7. hdu2208之搜索

    唉,可爱的小朋友 Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. 用c++语言编写函数 int index(char *s,char * t),返回字符串t在字符串s中出现的最左边的位置,如果s中没有与t匹配的子串,则返回-1。类似于索引的功能。

    首先,分析一下程序的思路: 1:从s的第i个元素开始,与t中的第1个元素匹配,如果相等,则将s的第i+1元素与t中的第2个元素匹配,以此类推,如果t所有元素都匹配,则返回位置i;否则,执行2; 2: ...

  9. CodePen&#39;s CSS

    p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 翻译自:CodePen's CSS 翻译人员:前端开发whqet,意译为主.不当之处欢迎大家指正. ...

  10. DWZ主从结构计算

    最终效果图: 首先我们需要修改一下主从结构的源码dwz.database.js,如下: function tdHtml(field){ var html='',suffix=''; if(field. ...