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 学习笔记之语句
Jan 14 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
JS Array对象入门分析
2008/10/30 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python制作图片缩略图
2019/04/30 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
基于Python实现扑克牌面试题
2019/12/11 Python
python 函数中的参数类型
2020/02/11 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
Python计算信息熵实例
2020/06/18 Python
python性能测试工具locust的使用
2020/12/28 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
金融专业个人求职信
2013/09/22 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
创业计划书之餐饮
2019/09/02 职场文书