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 ...
随机推荐
- 解决方案:elipse一直loading descriptor for...
1,问题描述: 打开eclipse,一直在loading descriptor for...,eclipse假死,什么操作都做不了 2,环境描述: Java Compiler:1.8 Jdk :1.8 ...
- MySQL学习笔记(2) - 修改MySQL提示符的两种方法
学习于慕课网 http://www.imooc.com/video/1806 1.方法一: cmd中处于未登录状态时,输入 mysql -uroot -p自己的密码 --prompt 新的提示符 示例 ...
- 高可用集群(HA)之DRBD原理和基础配置
目录 1.工作原理图 2.用户空间工具 3.工作模式 4.实现主备故障自动切换 5.所需软件 6.配置文件 7.详细配置 1.配置通用属性信息 2.定义一个资源 3.初始化资源 ...
- 利用raspberry pi搭建typecho笔记(三) typecho nginx sqlite FAQ
前言 这是一个汇总文,用来总结我在整个配置过程中遇到的各种问题.因为我在解决这些问题的过程中发现,typecho被部署在这种需要完全自己配置的平台上的情况是比较少的,相关的资料也比较少,所以我的解决过 ...
- inotifywait实现目录监控
http://blog.csdn.net/firefoxbug/article/details/8188804
- 《Programming WPF》翻译 目录
原文:<Programming WPF>翻译 目录 注:第1.2章我只做了笔记,没有翻译,请大家阅读时注意. 还有就是,这本书的英文版本下载:[O'Reilly] Programming ...
- 关于DLL模块导出函数
当然以前我知道有一个.def文件的,里面写的都是需要导出的函数,以为与__declspec(dllexport)作用是一样的.但是今天看公司项目源码的时候才知道,它们两个导出方法是有一定的区别的,编译 ...
- 自定义searchview的编辑框,搜索按钮,删除按钮,光标等
//指定某个私有属性 Field mSearchHintIconField = argClass.getDeclaredField("mSearchHintIcon"); mSea ...
- 【转】Android虚拟平台的编译和整合
原文网址:http://blog.csdn.net/rickleaf/article/details/6369065 概要 Android从2008年开始到本文写的2011年,短短三年的时间里成为手机 ...
- Beauty of Array(模拟)
M - M Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit Status P ...