Angularjs中的事件广播 —全面解析$broadcast,$emit,$on  更新时间:2016年05月17日 08:56:28   投稿:jingxian   下面小编就为大家带来一篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧 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 代码: 这里是父级Div 这里是子级SelfDiv 这里是子级ChildDiv 这里是Self的兄弟BortherDiv Code    效果: 其他属性: 以上这篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章: Angularjs为ng-click事件传递参数 Angularjs 动态添加指令并绑定事件的方法 Angularjs中使用指令绑定点击事件的方法 angularjs实现下拉列表的选中事件示例 详解Angularjs 如何自定义Img的ng-load 事件 AngularJS实现给动态生成的元素绑定事件的方法 AngularJS中directive指令使用之事件绑定与指令交互用法示例 AngularJS 中的事件详解 浅谈angularJS中的事件 Angularjs 事件指令详细整理 Angularjs 事件广播 $broadcast $emit $on 相关文章 angular过滤器实现排序功能 这篇文章主要为大家详细介绍了angular过滤器实现排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 基于AngularJS前端云组件最佳实践 这篇文章主要为大家详细介绍了基于AngularJS前端云组件最佳实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-10-10 AngularJS 中ui-view传参的实例详解 这篇文章主要介绍了AngularJS 中ui-view传参的实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容,需要的朋友可以参考下 2017-08-08 AngularJS ng-controller 指令简单实例 本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下 2016-08-08 Angular下H5上传图片的方法(可多张上传) 本文给大家分享在使用angular上传图片的功能,在开发过程中遇到很多问题,最终都解决了,今天小编给大家介绍下Angular下H5上传图片的方法(可多张上传),非常不错,需要的朋友参考下 2017-01-01 angularjs1.X 重构controller 的方法小结 这篇文章主要介绍了angularjs1.X 重构controller 的方法小结,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 AngularJS上传文件的示例代码 上传文件在很多时候都能用到,这篇文章主要介绍了AngularJS上传文件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码 这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧 2016-05-05 Angular5中状态管理的实现 这篇文章主要介绍了Angular5中状态管理的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 AngularJs Scope详解及示例代码 本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下 2016-09-09 最新评论

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为ng-click事件传递参数
  • Angularjs 动态添加指令并绑定事件的方法
  • Angularjs中使用指令绑定点击事件的方法
  • angularjs实现下拉列表的选中事件示例
  • 详解Angularjs 如何自定义Img的ng-load 事件
  • AngularJS实现给动态生成的元素绑定事件的方法
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例
  • AngularJS 中的事件详解
  • 浅谈angularJS中的事件
  • Angularjs 事件指令详细整理
张贴在3