• $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. linux下virtualenv的python版本

    virtualenv是python开发中一个重要的工具,它可以帮助我们创建一个干净的python解释环境,创建虚拟环境时,这个虚拟环境的 python版本往往是系统默认的2.x版本.别急,我们只需要一 ...

  2. 写jQuery插件时,一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  3. linux软件安装(rpm,源码编译)

    1.rpm(redhat package manager)管理器主要目的在于解决软件的安装.卸载.升级.查询.验证等,例如升级过程中,保留软件的配置文件,安装过程中,检查软件依赖的库文件,以及卸载过程 ...

  4. python 核心编程第六章课后题自己做的答案

    6–6. 字符串.创建一个 string.strip()的替代函数:接受一个字符串,去掉它前面和后面的 空格(如果使用 string.*strip()函数那本练习就没有意义了) 'Take a str ...

  5. C++之------回调函数

    一:What?(什么是回调函数) 回调函数图文讲解 谓回调,就是客户程序C调用服务程序S中的某个函数A,然后S又在某个时候反过来调用C中的某个函数B,对于C来说,这个B便叫做回调函数. 例如Win32 ...

  6. 使用PHP从web访问mysql数据库

    一. web数据库构架的工作原理 1. 用户由浏览器发出HTTP请求,请求特定的web页面. 2. web服务器接受接收到对特定页面的请求,检索相应文件,并将其传递给php引擎处理. 3. php引擎 ...

  7. debian gnome 3插件

    1.gnome 配置-安装插件 http://maxubuntu.blogspot.com/2012/09/debian-gnome3.html hunagqf|hunaqf2|hunaqf3 2.快 ...

  8. android Unable to resolve target 'android-XX'错误和conversion to dalvik format failed with error 1错误

    当用eclipse 导入一个已经存在的项目时,经常会遇见:Unable to resolve target 'android-XX' 类似的错误.这是因为导入的项目代码中project.propert ...

  9. TD数量不确定时如何让其宽度平均分布

    D数量不确定时如何让其宽度平均分布?答案很简单,我们只要在table里面加上一下代码就可以实现. table { width: 100%; table-layout: fixed; }

  10. MySQL库目录下db.opt文件的作用

    细心的朋友可能会发现有时候在某些库目录下有个 db.opt 文件,那这个文件是干什么用的呢?如果你用vi等编辑器打开看的话,内容很简单,是用来记录该库的默认字符集编码和字符集排序规则用的.也就是说如果 ...