angularJS广播
控制器之间共享数据(向父级/子级控制器传递event,data),类似于service在不同的控制器中通信
html:
<div ng-controller="ParentCtrl">
<div ng-controller="SelfCtrl">
<a ng-click="click()">click</a>
<div ng-controller="ChildCtrl"></div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
js:
angular.module('myApp', [])
.controller('SelfCtrl', ['$scope','$rootScope', function($scope, $rootScope){
var admin1 = {
'name': 'father',
'age': 45
};
var admin2 = {
'name': 'Lucy',
'age': 25
};
$scope.click = function() {
//事件的发送
//向子级控制器传递数据和事件,只有ChildCtrl能接受到广播,还有自己
$scope.$broadcast('to-child', admin2);
//向父级控制器传递数据和事件,只有parentCtrl能接收到广播,还有自己
$scope.$emit('to-parent', admin1);
//$rootScope发出的广播所有的作用域都可以接受到,
$rootScope.$broadcast('to-bro', '平级的数据');
}
}]).controller('ParentCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
//事件的接受
$scope.$on('to-parent', function(event, data){
console.log(event);
});
}]).controller('ChildCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
$scope.$on('to-child', function(event, data){
console.log(data);
});
}]).controller('BroCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
//$scope和$rootScope都可以接受到事件
$scope.$on('to-bro', function(event, data){
console.log(data);
});
$rootScope.$on('to-bro', function(event, data){
console.log(data);
});
}]);
angularJS广播的更多相关文章
- AngularJs 服务 广播
1, angularJs的服务有provider,Service, Factory. Factory是对Service的封装,Service是对Provider的封装. Provide的源码如下: f ...
- angularjs 控制器、作用域、广播详解
一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...
- angularJS 事件广播与接收[转]
路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...
- AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅
不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$b ...
- angularJS 事件广播与接收
发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event ...
- 使用ionic中的侧边栏以及angularjs中广播的使用
接着之前的ionic的例子 查看例子:我的第一段ionic代码 demo3.html(黄底内容为增加或修改的内容) <!DOCTYPE html> <html ng-app=&quo ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
随机推荐
- Eclipse无法识别Android真机的解决方法
使用IORegistryExplorer(在Developer Tool)可以查看连接上的USB设备的信息.选择IOUSB,可以看到名为连线的安卓设备,比如小米idVendor是0x2717. ech ...
- JavaScript高级程序设计28.pdf
classList属性 在操作类名时需要通过className属性添加.删除和替换类名 <div class="bd user disabled">...</di ...
- 关于ASSERT(断言)的作用
程序一般分为Debug 版本和Release 版本,Debug 版本用于内部调试,Release 版本发行给用户使用.断言assert 是仅在Debug 版本起作用的宏,它用于检查“不应该”发生的情况 ...
- hdoj 3336 Count the string【kmp算法求前缀在原字符串中出现总次数】
Count the string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Hibernate学习之表一对多,多对一关系
代码: person类: public class Person { private long id; private String name; private int age; private Da ...
- MyBatis+Spring 事务管理
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://kinglixing.blog.51cto.com/34 ...
- How to easily concatenate text based on criteria in Excel? 如何将Excel中的文本按条件合并
To combine text with the unique ID numbers, you can extract the unique values first and then create ...
- Android_adb使用
Android Debug Bridge version 1.0.26 - #当升级 Android SDK 后,ADB 也会随之升级. adb [-d|-e|-s {<serialNumber ...
- 最简单的基于FFMPEG的封装格式转换器(无编解码)
本文介绍一个基于FFMPEG的封装格式转换器.所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(相应.avi,.flv,.mkv,.mp4文件).须要注意的是,本程序并不进行视 ...
- JavaScript读取txt文本文件方法详解
http://blog.163.com/sophie8910@126/blog/static/8304612620122834121264/ 第一步:创建一个可以将文件翻译成文件流的对象. Var f ...