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

最新推荐文章于 2024-04-09 18:14:47 发布
最新推荐文章于 2024-04-09 18:14:47 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angularjs/article/details/8781285
版权
$emit和$broadcast使得event、data在controller与view之间的传递变的简单。
  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
先看测试代码：
emit-broadcast.html

<!DOCTYPE html>
<html>
<head>
      <link href="../bootstrap.css" rel="stylesheet"/>
      <script type="text/javascript" src="../jquery.js"></script>
      <script type="text/javascript" src="../bootstrap.js"></script>
      <script type="text/javascript" src="../angular.js"></script>
      <script type="text/javascript" src="emit-broadcast.js"></script>
      <style>
            .ng-scope {
                  border: 1px dotted red;
            }
      </style>
</head>
<body>
<div ng-app="" class="container">
      <div ng-controller="EventController" class="span12">
            Root scope MyEvent count: {{count}}
            <ul>
                  <li ng-repeat="i in [1]" ng-controller="AbcController">
                        <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
                        <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
                        <br>
                        Middle scope MyEvent count: {{count}}
                        <ul>
                              <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                                    - Leaf scope MyEvent count: {{count}}
                              </li>
                        </ul>
                  </li>
            </ul>
      </div>
</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调试，比较方便
angularjs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
weixin_30753873的博客
04-27 210
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍： $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下：$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args) ...
微信小程序Wepy框架的三个事件交互($broadcast，$emit，$invoke)
weixin_30296405的博客
06-28 234
$broadcast： $broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序，如上图，如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图 理解官方意...
vue $dispatch 和 $broadcast 详解
weixin_36430673的博客
03-16 1964
在vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性，主要用来实现基于组件树结构的事件通信。 $dispatch解析 dispatch是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。当它触发父组件上的事件侦听器时，传播会停止，除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。 dispatch接收两种参数：event 事件名称，[…args...
angularjs - on、on、emit和$broadcast的使用与区别
Andrew_Chenwq的博客
04-21 436
onon。
Vue $dispatch 和 $broadcast 详解
weixin_34411563的博客
03-06 2245
00 前言 $dispatch 和 $broadcast 作为一对情侣
broadcast:一个可在网站上播放JavaScript库
05-24
**广播（Broadcast）：一个...通过理解和应用Broadcast，开发者可以构建出更动态、响应式的Web应用，同时保持代码结构的清晰和维护性。无论是新手还是经验丰富的开发者，都可以从中受益，提升开发效率和应用质量。
socket-test:Socket.io测试项目
05-06
这个测试项目旨在帮助开发者更好地理解和运用Socket.IO的各种特性，例如连接建立、数据传输、事件监听和触发等。 1. **连接建立**：Socket.IO支持HTTP、HTTPS、WebSocket等多种协议，并自动处理协议升级。在客户端...
Angularjs的Controller间通信机制实例分析
10-21
- **$broadcast**：与$emit相反，`$broadcast`用于触发自底向上的事件。当你在某个Scope上调用`$scope.$broadcast(eventName, data)`时，事件会被发送给当前Scope的所有子Scope，直到到达最深层的子Scope。 2. **...
websockt模拟定时告警和聊天
07-20
要深入了解`wstest`的内容，你需要查看文件的具体结构和代码，理解其中的逻辑和功能。根据文件类型，你可能需要使用文本编辑器或者代码编辑器打开，然后逐行解析代码，了解其工作原理。 总结来说，WebSocket技术为...
Angularjs全局变量被作用域监听的正确姿势
11-22
4. **使用事件广播和发布（$emit/$broadcast/$on）**：如果只需要在特定的子作用域层级上响应全局变量的变化，可以使用事件机制。$rootScope上的`$broadcast`可以向下传递事件，而`$emit`则向上传递。这种方式提供了...
Angular中$broadcast和$emit的使用方法详解
08-30
本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Angularjs中的事件广播（全面解析$broadcast,$emit,$on）
js_admin的博客
05-03 4017
下面小编就为大家带来一篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧 Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍： $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下
Vue中的情侣属性$dispatch和$broadcast详解
infotw的博客
06-10 3777
$dispatch 和 $broadcast 作为一对情侣
Vue.js组件精讲 第4章 组件的通信2：派发与广播——自行实现dispatch和broadcast方法
最新发布
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
04-09 1331
Vue.js 的组件通信到此还没完全结束，如果你想“趁热打铁”一口气看完，可以先阅读第 6 节组件的通信 3。亦或按顺序看下一节的实战，来进一步加深理解 provide / inject 和 dispatch / broadcast 这两对通信方法的使用场景。注：本节部分代码参考 iView。
vue组件通信之派发与广播（dispatch 和 broadcast ）
liuhua_2323的博客
11-30 1836
Vue.js 1.x 的 $dispatch 与 $broadcast 虽然 Vue.js 1.x 已经成为过去时，但为了充分理解本节通信方法的使用场景，还是有必要来了解一点它的历史。 在 Vue.js 1.x 中，提供了两个方法：`$dispatch` 和 `$broadcast` ，前者用于向上级派发事件，只要是它的父级（一级或多级以上），都可以在组件内通过 `$on` （或 events...
Angular中$broadcast和$emit的使用方法
热门推荐
justforuse的博客
08-21 3万+
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。broadcast译为广播，即上级传递下级。 示例代码： <script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", functio
Vue组件之$dispatch和$broadcast
Sunday97的博客
06-11 2014
$ dispatch 主要是事件流由当前组件往父组件流动，当满足一定条件的时候就会触发当前子组件的监听事件，$broadcast 的功能是事件流由当前组件向子组件流动，当满足一定条件的时候就会触发当前子组件的监听事件。也就是说 $dispatch 和 $broadcast 主要解决了父子组件、嵌套父子组件的通信，但是没有解决兄弟组件的通信问题。所以后面被遗弃了。 如果要用这两个方法的话，就先在主j...
vue2.0弃用$dispatch和$broadcast
weixin_30772105的博客
09-19 365
$dispatch和$broadcast已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。 因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch和$broadcast也没有解决兄弟组件间的通信问题。 对于$dispatch和$b...
angular中$emit与$broadcast详解
在路上
05-28 9384
angularjs 中 broadcast与broadcast 与 emit $on的处理思想 对于Angular的controll之间的通信方式，我们可以常见有有几种方式，如可以通过rootScope，还有通过rootScope，还有通过scope的作用域，当然还有一种个人觉得很好的通信方式就是broadcast,broadcast,emit,$on来监听； broadcast方式与broadc
uni.$emit和$emit的区别
11-27
uni.$emit和this.$emit的作用是相同的，都是用于触发自定义事件。它们的区别在于使用场景不同。uni.$emit是在非Vue组件中使用的，而this.$emit是在Vue组件中使用的。在Vue组件中，可以使用this.$emit来触发自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值