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


Posted in Javascript onMay 17, 2016

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

代码:

<!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

其他属性:
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

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

Javascript 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
iScroll.js 使用方法参考
May 16 #Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 #Javascript
老司机带你解读jQuery插件开发流程
May 16 #Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 #Javascript
jQuery插件制作的实例教程
May 16 #Javascript
总结jQuery插件开发中的一些要点
May 16 #Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
关于PHP语言构造器介绍
2013/07/08 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php数组添加元素方法小结
2014/12/20 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jquery实用代码片段集合
2010/08/12 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
puppeteer库入门初探
2019/01/09 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python实现配置文件备份的方法
2015/07/30 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
道路运输企业安全生产责任书
2014/07/28 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
离婚协议书范文2016
2016/03/18 职场文书
react 路由Link配置详解
2021/11/11 Javascript
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle