AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构。
其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。
那么在这种情况下，如何在作用域之间通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。
在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。但是这种方法有一些限制。例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
发送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
区别：
- $emit只能向parent controller广播event与data
- $broadcast只能向child controller广播event与data
接收消息： $scope.on(name,function(event,data){ });
$on 有两个参数function(event,msg) 第一个参数是事件对象，第二个参数是接收到消息信息
例子如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body ng-app="myApp">
<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>
<script>
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); //父级能得到值 ParentCtrl parent
});
$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); //子级能得到值 ChildCtrl child
});
$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); //平级得不到值
});
});
</script>
</body> </html>
AngularJS 事件广播与接收 $emit $broadcast $on的更多相关文章
- angularJS 事件广播与接收[转]
路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...
- angularJS 事件广播与接收
发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event ...
- AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅
不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$b ...
- Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...
- [spring源码学习]九、IOC源码-applicationEventMulticaster事件广播
一.代码实例 回到第IOC的第七章context部分,我们看源码分析部分,可以看到在spring的bean加载之后的第二个重要的bean为applicationEventMulticaster,从字面 ...
- VB.net Wcf事件广播（订阅、发布）
这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处. 一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...
- AngularJs 服务 广播
1, angularJs的服务有provider,Service, Factory. Factory是对Service的封装,Service是对Provider的封装. Provide的源码如下: f ...
- AngularJS学习之旅—AngularJS 事件(十四)
1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...
- laravel 事件广播
Laravel 5.1 之中新加入了事件广播的功能,作用是把服务器中触发的事件通过websocket服务通知客户端,也就是浏览器,客户端js根据接受到的事件,做出相应动作.本文会用简单的代码展示一个事 ...
随机推荐
- 【图算法】Dijkstra算法及变形
图示: 模版: /* Dijkstra计算单源最短路径,并记录路径 m个点,n条边,每条边上的权值非负,求起点st到终点et的最短路径 input: n m st et 6 10 1 6 1 2 6 ...
- Ubuntu 最好用的CHM阅读器KchmViewer
直接在“ubuntu软件中心”进行搜索安装 为什么说它是最好用?很简单!可同时显示目录和内容,中文没乱码!能实现这两点的竞争对手已经不多了,至少我是没发现.什么chmsee,gnochm,都有乱码.虽 ...
- ubuntu下文件压缩/解压缩
ubuntu下文件压缩/解压缩 http://blog.csdn.net/luo86106/article/details/6946255 .gz 解压1:gunzip FileName.gz 解压2 ...
- host.conf 文件
/etc/host.conf文件的作用是设置名称解析时的先后顺序/etc/hosts文件是在使用host解析时,手动的添加的主机记录/etc/relov.conf文件中设置DNS服务器名称以及缺省的域 ...
- DragonBones龙骨发布后在Egret中的位置
DragonBones发布后的动画,加载到Egret中场景中,原点的位置在哪呢? DragonBones中的图片位置 导出 加载到Egret中.可见DragonBones中的图片位置原点左下方(0,0 ...
- 前端开发利器 Emmet 介绍与基础语法教程
在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...
- jquery的$.each如何退出循环和退出本次循环
https://api.jquery.com/jQuery.each/ We can break the $.each() loop at a particular iteration by maki ...
- T49
明天参加媳妇朋友的婚礼.今天晚上的火车,下班后匆忙的打了个的,正好到的哥交接班的时间拦了几辆车都不拉火车站!无奈-五分钟后打上车接上媳妇去火车站!正值五中学生放假路上各种堵!安阳这四线城市什么时候变的 ...
- BZOJ2200 道路和航线【好题】【dfs】【最短路】【缩点】
2200: [Usaco2011 Jan]道路和航线 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 1384 Solved: 508[Submit] ...
- poj3252Round Numbers【组合数】【数位dp】
Round Numbers The cows, as you know, have no fingers or thumbs and thus are unable to play Scissors, ...