AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅
不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信。
一、说明
1、广播
$broadcast
说明：将事件从父级作用域传播至本作用域及子级作用域。
格式：$broadcast(eventName,args)
$emit
说明：将事件从子级作用域传播至本作用域及父级作用域,直至根作用域。
格式：$emit(eventName,args)
2、接收
$on
说明：在作用域中监控从子级或父级作用域中传播过来的事件及相应的数据。
格式：$on(eventName,function(event,data){ })
event说明：
event.targetScope //获取传播事件的作用域
event.currentScope //获取接收事件的作用域
event.name //传播的事件的名称
event.stopPropagation() //阻止事件进行冒泡传播，仅在$emit事件中有效 ,当前作用域的上层作用域就不能再接收到消息事件
event.preventDefault() //阻止传播事件的发生
event.defaultPrevented //如果调用了preventDefault事件则返回true
二、例子
1、$scope.$emit
由子作用域向上级作用域传播数据。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
var myApp = angular.module("myApp", []); //控制器Parent
myApp.controller("Parent", function ($scope, $window) {
$scope.name = "Parent";
$scope.$on("fromChild", function (event, data) {
$window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
}); });
//控制器Child
myApp.controller("Child", function ($scope, $window) {
$scope.toTop = function () {
//向上传播的事件，eventName:'fromChild', data:oneObject
$scope.$emit("fromChild", { divName: "child", description: "向上播数据" });
}; });
</script> </head>
<body>
<form>
<div ng-controller="Parent">
<div ng-controller="Child">
<input type="button" ng-click="toTop()" value="向上传播事件" />
</div>
</div>
</div>
</form>
</body>
</html>
运行结果
2、event.stopPropagation()
阻止事件进行冒泡传播，仅在$emit事件中有效 ,当前作用域的上层作用域就不能再接收到消息事件。
上个例子原来应该rootScope也能收到事件消息，如果加一句event.stopPropagation()，rootScope就不能收到事件数据。
代码修改如下：
//控制器Parent
myApp.controller("Parent", function ($scope, $window) {
$scope.name = "Parent";
$scope.$on("fromChild", function (event, data) {
$window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
event.stopPropagation()；
}); });
三、项目实例
子作用域 childScope
<div class="panel-heading" style="border-radius: 5px 5px 0 0; background-color: #608FB7;padding:10px;">
<strong>
{{focusedInput.inputType}}: #{{focusedInput.tooth.code2}}
{{focusedInput.toothSurface|toToothSurfaceString}}
{{focusedInput|toPerioInputPositionName}}
</strong>
</div>
<div class="panel-body perio-input-board" style="padding:5px;margin-left:8px;">
<div style="width: 180px;float:left" class="perio-input-number-board">
<button type="button" class="btn btn-lg btn-default" ng-click="setValue(1)">1</button>
</div> </div>
$emit向上层作用域发送消息广播，消息名称“perioInputFinished”，消息数据对象$scope.focusedInput
var setValue = function (value) {
if ($scope.focusedInput) {
$scope.$emit('perioInputFinished', $scope.focusedInput);
}
};
上级作用域parentScope
注册和接收，消息事件“perioInputFinished”，后又向子作用域广播，消息“perioValueChanged”，这样发送消息源作用域的兄弟作用域也可以收到消息事件
var init = function () {
//监控消息广播
$scope.$on('perioInputFinished', onPerioInputFinished);
};
//监控到后，接收又广播
var onPerioInputFinished = function (event, perioInput) {
$scope.$broadcast('perioValueChanged', perioInput);
};
下级作用域childScope1
接收到“perioValueChanged”消息后，通过名称联系，进行最终处理,onPerioValueChanged
var onPerioValueChanged = function (event, perioInput) {
if (perioInput.arch == $scope.arch && perioInput.toothSurface == $scope.toothSurface
&& (perioInput.inputType == 'PD' || perioInput.inputType == 'GM')) {
refreshLine();
}
};
var init = function () {
$scope.$on('perioValueChanged', onPerioValueChanged);
};
四、封装成服务factory方式
发布订阅模式
app.factory('eventAggregator', ['$log', '$rootScope', function ($log, $rootScope) {
'use strict';
var events = {
ChargeOrderCreated: 'ChargeOrderCreated',
SelectedEmployee: 'SelectedEmployee'
};
var publish = function (event, eventData, sender) {
$log.debug('[eventAggregator] publish(): ' + event);
$rootScope.$broadcast(event, eventData, sender);
};
$('body').on('sidebar-toggled', function (event, isCollapsed) {
$rootScope.isSideBarCollapsed = isCollapsed;
publish(events.AppSideBarToggled, null);
});
return {
events: events,
publish: publish,
subscribe: function (scope, event, callback) {
return scope.$on(event, callback);
}
};
}
]);
使用方式：
订阅：$scope.$on
var subscribeEvent = function () {
eventAggregator.subscribe($scope, eventAggregator.events.ChargeOrderCreated, refresh);
};
发布：$rootScope.$broadcast
eventAggregator.publish(eventAggregator.events.ChargeOrderCreated, chargeData, eventSender);
AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅的更多相关文章
- angularJS 事件广播与接收[转]
路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...
- angularJS 事件广播与接收
发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...
- angularjs事件传递$on、$emit和$broadcast
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...
- [spring源码学习]九、IOC源码-applicationEventMulticaster事件广播
一.代码实例 回到第IOC的第七章context部分,我们看源码分析部分,可以看到在spring的bean加载之后的第二个重要的bean为applicationEventMulticaster,从字面 ...
- VB.net Wcf事件广播（订阅、发布）
这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处. 一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...
- Android广播机制：Broadcast
转载:Android总结篇系列:Android广播机制 1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广 ...
- AngularJS学习之旅—AngularJS 事件(十四)
1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...
随机推荐
- MySql5.5 SQL优化 慢查询日志存储
一.MySql的慢查询日志的开启和存储 1.查看是否把没有使用索引的SQL记录到慢查询日志中,查看 log_queries_not_using_indexes 变量; show VARIABLES L ...
- Python如何管理内存？
对于Python来说,内存管理涉及所有包含Python对象和堆. Python内存管理器在内部确保对堆的管理和分配. Python内存管理器具有不同的组件,可处理各种动态存储管理方面,如共享,分段,预 ...
- dede 栏目及子栏目
结果如图: <ul class="bottom_ul"> {dede:channelartlist } <li><a href="{dede ...
- Lazarus下面的javascript绑定另外一个版本bug修正
Lazarus下面的javascript绑定另外一个版本bug修正 从svn 检出的代码有几个问题 1.fpcjs.pas 单元开始有 {$IFDEF FPC} {$MODE delphi} {$EN ...
- Spring 系列教程之 bean 的加载
Spring 系列教程之 bean 的加载 经过前面的分析,我们终于结束了对 XML 配置文件的解析,接下来将会面临更大的挑战,就是对 bean 加载的探索.bean 加载的功能实现远比 bean 的 ...
- linux-ubuntu 下R无法安装HH包的原因及解决方案
错误信息: configure: error: GNU MP not found, or not 4.1.4 or up, see http://gmplib.org ERROR: configura ...
- python学习 day2 (3月2日)
.if if else 和 if elif else 的区别是: 前者 判断第一个 判断完第二个 之后还会执行else: 后者是只有满足条件(即都不符合if.elif里的条件时才会进入else) 不清 ...
- Ajax复习
1.标准请求响应时浏览器的动作(同步操作) 1.1 浏览器请求什么资源,跟随显示什么资源 2.ajax:异步请求: 2.1 局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容 ...
- [转]urllib模块urlretrieve方法
直接将远程数据下载到本地 info: urllib.urlretrieve(url[, filename[, reporthook[, data]]])参数说明:url:外部或者本地urlfilena ...
- 2018.10.26 bzoj2721: [Violet 5]樱花（数论）
传送门 推一波式子: 1x+1y=1n!\frac 1 x+\frac 1 y=\frac 1 {n!}x1+y1=n!1 =>xy−x∗n!−y∗n!xy-x*n!-y*n!xy−x∗n ...