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>

Angularjs中的事件广播 —全面解析$broadcast,$emit,$on的更多相关文章

  1. Flutter中的事件广播event_bus的基本使用

    官方包参考地址: https://pub.dev/packages/event_bus https://github.com/marcojakob/dart-event-bus 1.pubspec.y ...

  2. AngularJS中的事件

    欢迎大家指导与讨论 : ) 前言  Angular的作用域在本质上是分层次的(有的住户在低层, 有的住户在高层), 它们可以通过父子关系很自然地进行沟通.但通常, 这种沟通是单向的(父->子的单 ...

  3. Android中在不同activity中进行自定义广播的解析

    相信有不少人和我一样曾经尝试过在同一个项目中的两个activity进行广播,发现怎么都实现不了.我也是困惑了好久才发现,这么搞本来就是不行的.首先在同一个项目下不同的activity之间广播没有意义, ...

  4. angularjs中阻止事件冒泡，以及指令的注意点

    appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...

  5. AngularJS中的DOM与事件

      前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" ...

  6. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  7. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  8. AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅

    不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$b ...

  9. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

随机推荐

  1. 集合、迭代器、增强for循环、泛型

    1集合 集合是java中提供的一种容器,可以用来存储多个数据. 数组的长度是固定的.集合的长度是可变的.集合中存储的元素必须是引用类型数据. 1.1ArrayList集合存储元素(复习) 例: pub ...

  2. FastDFS整合Nginx

    浏览器访问FastDFS存储的图片需要通过Nginx访问 需要安装fastdfs-nginx-module.Nginx 安装fastdfs-nginx-module模块 (1)将fastdfs-ngi ...

  3. BZOJ4299: Codechef FRBSUM(主席树)

    题意 题目链接 数集S的ForbiddenSum定义为无法用S的某个子集(可以为空)的和表示的最小的非负整数. 例如,S={1,1,3,7},则它的子集和中包含0(S’=∅),1(S’={1}),2( ...

  4. HBase数据模型(2)

    HBase数据模型(1) HBase数据模型(2) 1.0 HBase的版本version,是一个用长整型表示的.由Rowkey.Column(列族和列).Version组合在一起称为HBase中的一 ...

  5. 小常识：变量的修饰符和DEMO

    public static string ss = "这是全局静态变量";//生命周期:程序结束为止,可以修改 public string s = "这是全局变量&quo ...

  6. Vue中使用computed与watch结合实现数据变化监听

    目的:当数据变化时,为其中重要数据增加边框,实现闪烁以达到提醒目的.数据格式如下,只有在未处理火警/故障时增加闪烁边框.可以使用watch进行深度监听.数据格式已定,也非常明确要监听的数据是有两个.既 ...

  7. ubuntu开放端口

    1.安装iptables(一般情况,ubuntu安装好的时候,iptables会被安装上),使用以下命令: $apt-get update $apt-get install iptables 2.安装 ...

  8. js 去除数组中的空值以及数组判断是否有重复数据

    1.判断是否有重复数据 function isRepeat(array){ var hash = {}; for(var i in array) { if(array[i]!="" ...

  9. 题解 P5051 【[COCI2017-2018#7] Timovi】

    看到这道题目,数据范围,心凉了一大截 这是没开O2的 而这是开了O2的 emm……本蒟蒻也无言以对呀 好了,回归正题,看到题目的标签,高性能,自然而然地想到了快读 相信做这题的大佬们一定知道吧! 快读 ...

  10. 利用Vue.js实现登录/登出以及JWT认证

    JSON Web Token 入门教程:http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html 后端代码地址:https ...