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 ...
随机推荐
- js继承模式
组合继承是js常用的继承模式,指的是将原型链和借用构造函数的技术结合在一起.其中的思想是使用原型链实现原型属性和方法的继承, 而通过借用构造函数实现对属性的继承. 例子: <script> ...
- php代码查询apache模块
<?php print_r(apache_get_modules()); ?> 注:此函数仅适用于CGI模式.
- Lucene学习总结之二:Lucene的总体架构
Lucene总的来说是: 一个高效的,可扩展的,全文检索库. 全部用Java实现,无须配置. 仅支持纯文本文件的索引(Indexing)和搜索(Search). 不负责由其他格式的文件抽取纯文本文件, ...
- symfony2路径问题
1.相对路径 例:在上传文件里面,路径设置为 $path = "upload/" 此时路径指向的是web/upload/; 2.绝对路径 例:$path = "/va ...
- TCP连接状态图
- 我是菜鸟,我怕谁--hdu2520
我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- sql每五秒插入一条数据 一次插入N条数据
1建立数据表 create table projectManage ( ID int identity primary key not null, projectName )not null, man ...
- c#以文件流的形式输出xml(可以解决内存溢出)-XmlTextWriter
1.XmlTextWriter 表示提供快速.非缓存.只进方法的编写器,该方法生成包含 XML 数据(这些数据符合 W3C 可扩展标记语言 (XML) 1.0 和“XML 中的命名空间”建议)的流或文 ...
- QTabWidget and QTabBar.的文字的颜色设置,三种方法
see the code after subclassingTabWidget::TabWidget(QWidget *parent): QTabWidget(parent),mousePressFl ...
- JavaScript 之 Cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...