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 相关文章推荐
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
微信小程序Redux绑定实例详解
Jun 07 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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 定界符 使用技巧
2009/06/14 PHP
php中socket的用法详解
2014/10/24 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
对Python3 序列解包详解
2019/02/16 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
八年级美术教学反思
2014/02/02 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
史上最牛的辞职信
2015/02/28 职场文书
小学庆六一主持词
2015/06/30 职场文书
奠基仪式致辞
2015/07/30 职场文书