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

最新推荐文章于 2023-04-21 05:00:00 发布
最新推荐文章于 2023-04-21 05:00:00 发布
阅读量206 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jiaxiaohua/p/6773851.html
版权

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信

介绍：

$broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下：$broadcast(eventName,args)

$emit的作用是将事件从子级作用域传播至父级作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args)

$on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。格式如下：$on(event,data)

上述说明中，eventName是需要监控的事件的名称，$on 方法中的参数event是事件的相关对象，data是事件传播的数据。

在$on的方法中的event参数，有如下的属性和方法

事件属性/方法 功能性说明

 

事件属性/方法功能性说明
event.targetScope获取传播事件的作用域
event.currentScope获取接收事件的作用域
event.name传播的事件的名称
event.stopPropagation()阻止事件进行冒泡传播，仅在$emit事件中有效
event.preventDefault()阻止传播事件的发生
event.defaultPrevented如果调用了preventDefault事件则返回true

 

代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!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 = "ajjs/angularjs.js" ></ script >
   < script >
     var myApp = angular.module("myApp", []);
     //控制器Self
     myApp.controller("Self", function ($scope,$window) {
       //button的传播事件
       $scope.toParent = function () {
         //注册一个向上传播的事件，eventName:'FromSelf', data:oneObject
         $scope.$emit("FromSelf", { divName: "Self", description: "向父传播数据" });
       };
       $scope.toChild = function () {
         //注册一个向下传播的事件，eventName:'FromSelf', data:oneObject
         $scope.$broadcast("FromSelf", { divName: "Self", description: "向子传播数据" });
       };
       $scope.name = "Self";
       $scope.$on("FromChild", function (event, data) {
         
         $window.alert("当前节点" + event.currentScope.name + "截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
       });
 
     });
     //控制器Parent
     myApp.controller("Parent", function ($scope, $window) {
 
       $scope.name = "Parent";
       //$on用于事件
       $scope.$on("FromSelf", function (event, data) {
         $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
       });
       $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.name = "Child";
       //$on用于截获来自父级作用域的事件
       $scope.$on("FromSelf", function (event, data) {
         $window.alert("当前节点" + event.currentScope.name +"截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
       });
       
       //button的传播事件
       $scope.toTop = function () {
         //注册一个向上传播的事件，eventName:'FromChild', data:oneObject
         $scope.$emit("FromChild", { divName: "Child", description: "向上播数据" });
       };
 
     });
   </ script >
 
</ head >
< body >
   < form name = "test" >
   < div ng-controller = "Parent" >
     这里是父级Div
     < div ng-controller = "Self" >
       这里是子级SelfDiv
       < input type = "button" ng-click = "toParent()" value = "向ParentDiv传播事件" />
       < input type = "button" ng-click = "toChild()" value = "向ChildDiv传播事件" />
       < div ng-controller = "Child" >
        这里是子级ChildDiv
         < input type = "button" ng-click = "toTop()" value = "向上传播事件" />
       </ div >
     </ div >
     < div ng-controller = "Borther" >
       这里是Self的兄弟BortherDiv
     </ div >
   </ div >
   </ form >
</ body >
</ html >

Code

 　 效果：

其他属性：

以上这篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

转载于:https://www.cnblogs.com/jiaxiaohua/p/6773851.html

weixin_30753873
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angularjs中的事件广播（全面解析$broadcast,$emit,$on）
js_admin的博客
05-03 4002
下面小编就为大家带来一篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧 Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍： $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下
Vue中的情侣属性$dispatch和$broadcast详解
infotw的博客
06-10 3757
$dispatch 和 $broadcast 作为一对情侣
微信小程序Wepy框架的三个事件交互($broadcast，$emit，$invoke)
weixin_30296405的博客
06-28 220
$broadcast： $broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序，如上图，如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图 理解官方意...
vue $dispatch 和 $broadcast 详解
weixin_36430673的博客
03-16 1941
在vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性，主要用来实现基于组件树结构的事件通信。 $dispatch解析 dispatch是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。当它触发父组件上的事件侦听器时，传播会停止，除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。 dispatch接收两种参数：event 事件名称，[…args...
angularjs - on、on、emit和$broadcast的使用与区别
最新发布
Andrew_Chenwq的博客
04-21 416
onon。
AngularJS $on、$emit和$broadcast的使用
10-21
本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下
Angular中$broadcast和$emit的使用方法详解
08-30
本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular指令及广播
amily8023的博客
05-30 1198
angular指令1.指令：directive(类似于bootstrap中组件的功能)描述：angularJS框架中提出了一种用来解决【大量重复冗余的页面编辑代码】的问题技巧，即为指令。2.语法：描述：在angular指令内部，所有的指令都是通过数据模型.directive()创建的        app.directive(‘指令名称’,function(){            return...
Angular发送广播和接收广播
weixin_30364325的博客
03-09 1165
home.module.ts import {BroadcastService} from "../broadcast.service"; @NgModule({ imports: [ ], declarations: [ ], entryComponents: [ ], providers: [BroadcastService],//全局提...
AngularJs scope事件机制$emit , $broadcast，$on广播事件（源码分析）
07-13 3058
在angular scope中可以通过$on，$emit和$broadcast方法实现了自定义事件机制,实现数据共享，原理其实并不复杂，下面我会用例子来做分析，先看一段测试源码： <div ng-controller="parentCtrl"> <div ng-controller="selfCtrl"> <a ng-c...
Angular中$broadcast和$emit的使用方法
热门推荐
justforuse的博客
08-21 3万+
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。broadcast译为广播，即上级传递下级。 示例代码： <script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", functio
理解angularjs中的$emit,$broadcast和$on
kong_12的博客
06-25 966
在angularjs中提供了emit,emit,broadcast和$on服务用于控制器之间基础事件的传递交流。 AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享...
angularjs事件同级传播
AboyL的博客
12-07 775
其实实现的办法很简单 我们首先把事件向上传播 在上层接受到事件后再向下传播 然后我们再在下层去接受这个事件 这样就可以实现同级传播了 这个样子我们就可以实现 多个directive组件在一个层级 d1 d1 d2 d3 这个样子 然后我们点击第一个d1 然后其他的组件做出反应
AngularJs 消息机制($emit、$broadcast、$on)
weixin_43294560的博客
02-22 352
1、发送消息必须配合事件如(ng-click)在回调函数中使用 2、$scope.$emit('名称',数据) 向自身以及父controller发送消息 3、$scope.$broadcast('名称',数据) 向自身以及子controller发送消息 4、$scope.$on('名称',function(event,data数据形参){...}) 接收消息 代码示例: <html n...
angularjs 广播
chuanlvai0354的博客
10-12 89
<!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <script src="../../components/angu...
AngularJS作用域$scope事件路由与广播
cje的博客
05-19 1306
AngularJS作用域支持两种事件传播方式： 事件从子作用域路由到父作用域——$emit()事件从父作用域广播到所有子作用域——$broadcast() $on()用于注册监听 $scope.$on("infoEvent",function(event,data){ }); data为调用$emit()或$broadcast()方法获得的数据event事件对象具有一些实用的属性和
代码中的Undirected event broadcast事件，举例说说
03-07
Undirected event broadcast是一种事件传播机制，它可以将事件广播到所有监听该事件的对象中，而不需要指定特定的接收者。例如，在一个多人游戏中，当一个玩家获得胜利时，可以使用Undirected event broadcast将胜利...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值