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

代码：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

<!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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

时间： 2024-10-04 09:57:52

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

Angularjs中的事件广播-浅谈$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat

angularjs中的事件传播$emit,$broadcast,$on

在这里写的技术点 一部分参考AngularJs权威教程一部分参考的是其它的博主的知识点 事件 :如同浏览器响应浏览器层的事件,比如鼠标点击.页面滚动那样,Angular应用也可以响应Angular事件.       这使我们在我们应用中嵌套各组件之间进行通信,即使这些组件在创建的时候并未考虑其他组件.我们可以认为事件是在应用中传播的事件信息片段,通常包含应用中发生的事件信息 注意: AnjularJs事件系统并不与浏览器中的事件系统相通,这意问着我们只能在作用域上监听Angular事件而不是在D

angularjs中的事件

$scope.$emit('eventName',parameter) //子作用域向父作用域发送事件,可以取消 $scope.$broadcast('eventName',parameter) //父作用域向子作用域发送事件,无法取消 $scope.$on('eventName',function(evt,parameter){}) //事件监听,evt.stopPropagation()可取消$emit()事件的传递,evt.preventDefault() 设置defaultPrevent

AngularJS中的DOM与事件

  前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" 传入true表示禁用,传入false表示可用 代码: <label> <input type="checkbox" ng-model="myCheck" />是否同意 </label> <button ng-disabled

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

可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下: $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchE

安卓中的事件分发机制源码解析

安卓中的事件分发机制主要涉及到两类控件,一类是容器类控件ViewGroup,如常用的布局控件,另一类是显示类控件,即该控件中不能用来容纳其它控件,它只能用来显示一些资源内容,如Button,ImageView等控件.暂且称前一类控件为ViewGroup类控件(尽管ViewGroup本身也是一个View),后者为View类控件. 安卓中的事件分发机制主要涉及到dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent e

AngularJS 中 Controller 之间的通信

用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利用子 Controller 控制父 Controller 上的数据.(父 Controller 中的数据要为引用类型,不能是基本类型,原因参见 AngularJS中的作用域 一文) 2)注入服务.把需要共享的数据注册为一个 service,在需要的 Controller 中注入. 3)基于事件.利用

AngularJS中Scope间通讯Demo

在AngularJS中,每一个controller都有对应的Scope,而Scope间有时候需要通讯.比如有如下的一个controller嵌套: <body ng-controller="AppCtrl"> <table ng-controller = "ProductCtrl"> ... <tr ng-repeat="product in products"> <td>{{$index + 1}}

AngularJS中的控制器和作用域

欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播   关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算.比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算. <input