Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on
- $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的更多相关文章
- 通过$broadcast或$emit在子级和父级controller之间进行值传递
通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...
- [转]MFC子线程中更新控件内容的两种办法
一.概述 每个系统中都有线程(至少都有一个主线程),而线程最重要的作用就是并行处理,提高软件的并发率.针对界面来说,还能提高界面的响应能力.一般的,为了应用的稳定性,在数据处理等耗时操作会单独在一个线 ...
- angular中控制器之间传递参数的方式
在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其 ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- 通过拦截器Interceptor实现Spring MVC中Controller接口访问信息的记录
java web工程项目使用了Spring+Spring MVC+Hibernate的结构,在Controller中的方法都是用于处理前端的访问信息,Controller通过调用Service进行业务 ...
- 程序中使用log4J打印信息的两种方式
(1)通过org.apache.commons.logging.Log 接口实例化: public static Log log = LogFactory.getLog(String name); p ...
- angular中控制器之间的通讯方式
1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...
- angular中$location读取url信息
读取url信息: <html ng-app="myApp"> <head> <title>angularjs-demo</title> ...
- Android中Activity之间的数据传递
在开发中,我们经常涌用到Activity,那么既然用到了Activity,就一定免不了在两个或者多个Activity之间传递数据.这里我们先说一说原理,然后在看看代码和例子. 情况A:我们需要从Act ...
随机推荐
- 序列化layer创建的弹出表单并ajax提交
/** *createTime:2015-09-13 *updateTime:2015-09-13 *author:刘俊 *phone:13469119119 *QQ:418873053 **/ va ...
- PHP方法的作用域
PHP支持6种方法作用域:public.private.protected.abstract.final和static,本文只讨论前5种作用域. public:公共作用域.(就像空气和阳光,天下公用) ...
- Common-logging 与 Log4j的结合使用
分类: Java 一.结合说明 在我们的日常开发中,经常需要通过输出一些信息进行程序的调试,如果到处都用system.out.println()则在项目发布之后要逐一删除,而log4j提供了一种新的调 ...
- mysql----show slave status \G 说明
show slave status \G 可以用来查看mysql 的复制状态,有些列名所表达的意思不太明确,现整理如下: 1. Slave_IO_State:ID线程的状态,如果master 的所有变 ...
- C++----练习--string输入输出
1.要使用标准库中的string 类型.也要增加头文件 #include<string> 2.例子: #include<iostream> #include<string ...
- CentOS6.4x64安装mysql5.6.23(rpm)
#查看已安装的的mysql shell>rpm -qa|grep -i mysql #根据上条命令的结果卸载mysql shell>rpm -e -nodeps mysql* #下载mys ...
- TreeSet与HashSet的区别
Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...
- 十二、享元(Flyweight)模式--结构模式(Structural Pattern)
Flyweight在拳击比赛中指最轻量级,即"蝇量级",有些作者翻译为"羽量级".这里使用"享元 模式"更能反映模式的用意. 享元模式以共享 ...
- ZOJ3574(归并排序求逆数对)
Under Attack II Time Limit: 5 Seconds Memory Limit: 65536 KB Because of the sucessfully calcula ...
- Clone使用方法详解【转载】
博客引用地址:Clone使用方法详解 Clone使用方法详解 java“指针” Java语言的一个优点就是取消了指针的概念,但也导致了许多程序员在编程中常常忽略了对象与引用的区别,本文 ...