关于$emit和$broadcast的理解与测试

最新推荐文章于 2024-04-09 18:14:47 发布

原创最新推荐文章于 2024-04-09 18:14:47 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍AngularJS中$emit和$broadcast的功能及用法，通过示例代码演示如何在不同控制器间传递事件和数据。

$emit和$broadcast使得event、data在controller与view之间的传递变的简单。

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data

先看测试代码：

emit-broadcast.html

<!DOCTYPE html>

<html>

<head>

<style>

.ng-scope {

border: 1px dotted red;

}

</style>

</head>

<body>

Root scope MyEvent count: {{count}}

<ul>

<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>

<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>

<br>

Middle scope MyEvent count: {{count}}

<ul>

- Leaf scope MyEvent count: {{count}}

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

emit-broadcast.js

function EventController($scope) {

$scope.count = 0;

$scope.$on('MyEvent', function() {

$scope.count++;

});

}

function AbcController($scope) {

// $scope.count = 0;

$scope.fireEvent = function() {

$scope.$emit('MyEvent');

$scope.$broadcast('MyEvent');

};

}

*注意resources的location哦，建议使用chrome调试，比较方便

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

angularjs

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

broadcast:一个可在网站上播放JavaScript库

05-24

**广播（Broadcast）：一个...通过理解和应用Broadcast，开发者可以构建出更动态、响应式的Web应用，同时保持代码结构的清晰和维护性。无论是新手还是经验丰富的开发者，都可以从中受益，提升开发效率和应用质量。

Angular中$broadcast和$emit的使用方法详解

08-30

本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_30753873的博客

04-27

279

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信介绍： $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下：$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args) ...

微信小程序Wepy框架的三个事件交互($broadcast，$emit，$invoke)

weixin_30296405的博客

06-28

297

$broadcast： $broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序，如上图，如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图理解官方意...

vue $dispatch 和 $broadcast 详解

weixin_36430673的博客

03-16

2071

在vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性，主要用来实现基于组件树结构的事件通信。 $dispatch解析 dispatch是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。当它触发父组件上的事件侦听器时，传播会停止，除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。 dispatch接收两种参数：event 事件名称，[…args...

Vue $dispatch 和 $broadcast 详解

weixin_34411563的博客

03-06

2372

00 前言 $dispatch 和 $broadcast 作为一对情侣

angularjs - on、on、emit和$broadcast的使用与区别

IT枫斗者的博客

04-21

538

onon。

深入理解AngularJS中的$scope和$rootScope

理解作用域是理解AngularJS框架的核心部分之一，对于开发者来说非常重要。让我们从基础开始，逐步深入探讨$scope和$rootScope在AngularJS中的重要作用。 ## 章节二：$scope的数据绑定与事件传播作用域是AngularJS...

深入理解AngularJS Controller作用域与数据绑定

AngularJS提供了$emit、$broadcast和$on等方法，允许在作用域层次结构中向上或向下传递自定义事件，实现跨Controller的通信。比如父Controller可以通过$broadcast发送消息，所有子作用域均可监听并响应，这对于复杂...

指令间的通信：深入理解与实践

本文将详细介绍指令间通信的多种方式，包括使用子作用域、隔离作用域、`$rootScope` 以及与控制器协作等，同时会结合具体的代码示例和测试用例进行讲解。 #### 1. wasFast 指令的基本功能 `wasFast` 指令主要用于...

ng-event-scope扩展Angular事件机制的实现

总结以上知识点，ng-event-scope模块扩展了AngularJS的核心事件处理机制，通过装饰$rootScope的$emit和$broadcast方法，实现了更加灵活和细粒度的事件处理。理解这些概念对于深入掌握AngularJS框架及进行高级应用...

Vue中的情侣属性$dispatch和$broadcast详解

infotw的博客

06-10

3907

$dispatch 和 $broadcast 作为一对情侣

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

js_admin的博客

05-03

4135

下面小编就为大家带来一篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧 Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信介绍： $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下

wepy框架组件通信

m0_62058094的博客

03-14

262

事件广播的顺序为广度优先搜索顺序，如上图，如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如果组件ComE发起一个$emit事件，那么接收到事件的先后顺序为：组件ComA、页面Page_Index。$invoke是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。1.组件传值：最常用的组件传值就是给子组件身上。

Vue源码分析 ----- 消失的$dispatch 和 $broadcast

DavidFFFFFF的博客

07-23

381

$dispatch 和 $broadcast作为一对情侣 ????属性，在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 —— 通过向上或向下以冒泡的形式传递事件流，以实现嵌套父子组件的通信。但是由于其显功能缺陷，在 Vue 2.0 中就被移除了。虽然 Vue 官网已经不再支持使用 $dispatch 和 $broadcast 进行组件通信，但是在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 等等。那么$dispatch 和 $broadcast 到

Vue.js组件精讲第4章组件的通信2：派发与广播——自行实现dispatch和broadcast方法