理解angularjs中的$emit,$broadcast和$on

最新推荐文章于 2019-07-13 18:45:05 发布

Inuyasha1121

最新推荐文章于 2019-07-13 18:45:05 发布

阅读量898

点赞数

分类专栏： AngularJS 文章标签： angularJS事件传播

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在angularjs中提供了emit,broadcast和$on服务用于控制器之间基础事件的传递交流。
1、$emit
该服务贯穿作用域发出一个向上的事件，并通知哪些注册在rootScope.Scope上的监听器。该事件的生命周期开始于emit被启动的地方，事件一直朝着根作用域传递，传递期间并通知哪些注册在作用域上的监听器，如果这期间一个监听器接受到了这个事件，会注销这个事件，那么事件将会停止向上继续传播。

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>Broadcasting</title>
    <script src="lib/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("firstCtrl", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
                console.log($scope.message);
            });
        });

        app.controller("secondCtrl", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$emit('eventName', { message: msg });
            };
        });

    </script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
    
    <h1>Parent Controller</h1>
    <p>Emit Message : </p>
    <br />
    
    
    <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
        <h1>Child Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Emit</button>
    </div>
    
</div>
</body>
</html>

运行结果如下：

这里写图片描述

2、$broadcast
该服务发布一个向下的事件给作用域中的所有子节点以及以下的节点，并通知注册在

rootScope.Scope上的监听器，该事件的生命周期也是从broadcast被启动开始。下面的所有作用域都会接收到通知。之后，事件向下传播，在这期间，作用域中的监听器接收到通知，获取事件，但是不会注销事件，事件继续往下传播。

<!DOCTYPE html>
<html>
<head>
    <title>Broadcasting</title>
    <script src="lib/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("firstCtrl", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$broadcast('eventName', { message: msg });
            };

        });

        app.controller("secondCtrl", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
                console.log($scope.message);
            });
        });

    </script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">

    <h1>Parent Controller</h1>
    <input ng-model="msg">
    <button ng-click="handleClick(msg);">Broadcast</button>
    <br />


    <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
        <h1>Child Controller</h1>
        <p>Broadcast Message : </p>
    </div>
    
</div>
</body>
</html>

运行结果如下：

这里写图片描述

3、$on
该服务监听指定类型的事件，获取从

emit或者broadcast发布的事件。

1、如果在作用域中没有父子关系存在，可以在控制器中注入$rootScope、使用$broadcast服务向下传播事件，但是不能通过$emit向上传播事件。

2、在作用域中存在父子关系时，可以也仅可以由子控制器使用$emit服务向上传播事件，同时父作用域中的控制监听器可以注销事件。

4、提示

1、如果在作用域中没有父子关系存在，可以在控制器中注入$rootScope、使用$broadcast服务向下传播事件，但是不能通过$emit向上传播事件。
2、在作用域中存在父子关系时，可以也仅可以由子控制器使用$emit服务向上传播事件，同时父作用域中的控制监听器可以注销事件。

[原文地址 Understanding emit,broadcast and $on in AngularJS]

(http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-emit,−broadcast-and-$on-in-AngularJS.html)

Inuyasha1121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
理解angularjs中的$emit,$broadcast和$on

在angularjs中提供了emit,broadcast和$on服务用于控制器之间基础事件的传递交流。 1、$emit 该服务贯穿作用域发出一个向上的事件，并通知哪些注册在rootScope.Scope上的监听器。该事件的生命周期开始于emit被启动的地方，事件一直朝着根作用域传递，传递期间并通知哪些注册在作用域上的监听器，如果这期间一个监听器接受到了这个事件，会注销这个事件，那么事件将会停止向上...
复制链接

扫一扫

专栏目录