不同作用域之间通过组合使用$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

　　由子作用域向上级作用域传播数据。

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  8. </head>
  9. <script>
  10.     var myApp = angular.module("myApp", []);
  11.  
  12.     //控制器Parent
  13.     myApp.controller("Parent", function ($scope, $window) {
  14.       $scope.name = "Parent";
  15.       $scope.$on("fromChild", function (event, data) {
  16.         $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
  17.       });
  18.  
  19.     });
  20.     //控制器Child
  21.     myApp.controller("Child", function ($scope, $window) {
  22.       $scope.toTop = function () {
  23.         //向上传播的事件，eventName:'fromChild', data:oneObject
  24.         $scope.$emit("fromChild", { divName: "child", description: "向上播数据" });
  25.       };
  26.  
  27.     });
  28.   </script>
  29.  
  30. </head>
  31. <body>
  32.   <form>
  33.   <div ng-controller="Parent">
  34.       <div ng-controller="Child">
  35.         <input type="button" ng-click="toTop()" value="向上传播事件" />
  36.       </div>
  37.     </div>
  38.   </div>
  39.   </form>
  40. </body>
  41. </html>

　　运行结果

　　

2、event.stopPropagation()

　　阻止事件进行冒泡传播，仅在$emit事件中有效 ,当前作用域的上层作用域就不能再接收到消息事件。

　　上个例子原来应该rootScope也能收到事件消息，如果加一句event.stopPropagation()，rootScope就不能收到事件数据。

　　代码修改如下：

  1. //控制器Parent
  2.     myApp.controller("Parent", function ($scope, $window) {
  3.       $scope.name = "Parent";
  4.       $scope.$on("fromChild", function (event, data) {
  5.         $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
  6.         event.stopPropagation()；
  7.       });
  8.  
  9.     });

三、项目实例

　　子作用域 childScope

  1.  <div class="panel-heading" style="border-radius: 5px 5px 0 0; background-color: #608FB7;padding:10px;">
  2.         <strong>
  3.             {{focusedInput.inputType}}: #{{focusedInput.tooth.code2}}
  4.             {{focusedInput.toothSurface|toToothSurfaceString}}
  5.             &nbsp;{{focusedInput|toPerioInputPositionName}}
  6.         </strong>
  7.     </div>
  8. <div class="panel-body perio-input-board" style="padding:5px;margin-left:8px;">
  9.         <div style="width: 180px;float:left" class="perio-input-number-board">
  10.             <button type="button" class="btn btn-lg btn-default" ng-click="setValue(1)">1</button>
  11.         </div>
  12.  
  13.     </div>

　　$emit向上层作用域发送消息广播，消息名称“perioInputFinished”，消息数据对象$scope.focusedInput

  1. var setValue = function (value) {
  2. 　　if ($scope.focusedInput) {
  3.    　　$scope.$emit('perioInputFinished', $scope.focusedInput);
  4.    }
  5. };

　　

　上级作用域parentScope

　　注册和接收，消息事件“perioInputFinished”，后又向子作用域广播，消息“perioValueChanged”，这样发送消息源作用域的兄弟作用域也可以收到消息事件

  1.  var init = function () {
    　　 //监控消息广播
  2.     $scope.$on('perioInputFinished', onPerioInputFinished);
  3.   };
  4.  
  5. 　//监控到后，接收又广播
  1.  var onPerioInputFinished = function (event, perioInput) {
  2.        $scope.$broadcast('perioValueChanged', perioInput);
  3.  };

　　下级作用域childScope1

　　接收到“perioValueChanged”消息后，通过名称联系，进行最终处理,onPerioValueChanged

  1. var onPerioValueChanged = function (event, perioInput) {
  2. 　　if (perioInput.arch == $scope.arch && perioInput.toothSurface == $scope.toothSurface
  3.    　　&& (perioInput.inputType == 'PD' || perioInput.inputType == 'GM')) {
  4.                     refreshLine();
  5.     }
  6. };
  7.  
  8. var init = function () {
  9.    $scope.$on('perioValueChanged', onPerioValueChanged);
  10. };

四、封装成服务factory方式

　　发布订阅模式

  1. app.factory('eventAggregator', ['$log', '$rootScope', function ($log, $rootScope) {
  2.     'use strict';
  3.  
  4.     var events = {
  5.         ChargeOrderCreated: 'ChargeOrderCreated',
  6.         SelectedEmployee: 'SelectedEmployee'
  7.     };
  8.  
  9.     var publish = function (event, eventData, sender) {
  10.         $log.debug('[eventAggregator] publish(): ' + event);
  11.         $rootScope.$broadcast(event, eventData, sender);
  12.     };
  13.  
  14.     $('body').on('sidebar-toggled', function (event, isCollapsed) {
  15.         $rootScope.isSideBarCollapsed = isCollapsed;
  16.         publish(events.AppSideBarToggled, null);
  17.     });
  18.  
  19.     return {
  20.         events: events,
  21.         publish: publish,
  22.         subscribe: function (scope, event, callback) {
  23.             return scope.$on(event, callback);
  24.         }
  25.     };
  26. }
  27. ]);

　　使用方式：

　　订阅：$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服务 发布订阅的更多相关文章

  1. angularJS 事件广播与接收[转]

    路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...

  2. angularJS 事件广播与接收

    发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event ...

  3. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  4. Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...

  5. angularjs事件传递$on、$emit和$broadcast

    如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...

  6. [spring源码学习]九、IOC源码-applicationEventMulticaster事件广播

    一.代码实例 回到第IOC的第七章context部分,我们看源码分析部分,可以看到在spring的bean加载之后的第二个重要的bean为applicationEventMulticaster,从字面 ...

  7. VB.net Wcf事件广播（订阅、发布）

    这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处.   一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...

  8. Android广播机制：Broadcast

    转载:Android总结篇系列:Android广播机制 1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广 ...

  9. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

随机推荐

  1. nginx + fastdfs 的开机自启动

    虚拟机每次启动之后都要重新启动一下fastdfs 和 nginx服务,比较麻烦,所以增加开机自启动: 编辑 /etc/rc.d/rc.local 文件,增加启动项: 1.编辑文件 vim /etc/r ...

  2. mtcp的快速编译（连接）

    mtcp的快速编译 http://mos.kaist.edu/guide/config/03_build_mtcp.html 介绍DPDK中使用mtcp的文档 https://dpdksummit.c ...

  3. ASCII码表以及不同进制间的O(1)转换

    ASCII码表以及不同进制间的O(1)转换          一.ASCII码表 ASCII全称为American Standard Code for Information Interchange, ...

  4. MySQL 检索数据及提高检索速度的方法

    检索数据 mysql> SELECT [DISTINCT] 表名.列名,表名.列名,表名.列名 -- 使用通配符*表示所有列 DISTINCT表示返回不同的值 -> FROM 数据库名.表 ...

  5. Partition Array Into Three Parts With Equal Sum LT1013

    Given an array A of integers, return true if and only if we can partition the array into three non-e ...

  6. from collections import namedtuple 使用

    from collections import namedtuple Point = namedtuple('Point', ['x', 'y'])#本质就是等价于 class Point(): # ...

  7. 堆和索引堆的实现(python)

    ''' 索引堆 ''' ''' 实现使用2个辅助数组来做.有点像dat.用哈希表来做修改不行,只是能找到这个索引,而需要change操作 还是需要自己手动写.所以只能用双数组实现. #引入索引堆的核心 ...

  8. python之Bottle框架

    一.简单的Bottle框架 1)bottle框架简介 安装 pip install bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架. 此框架只由一个 .py 文件,除 ...

  9. oracle 查看数据库版本

    select * from v$version;

  10. (2)The secrets of learning a new language

    https://www.ted.com/talks/lydia_machova_the_secrets_of_learning_a_new_language/transcript 00:13I lov ...