• 在angularjs中提供了emit,broadcast和$on服务用于控制器之间基础事件的传递交流。


    1、$emit 
    该服务贯穿作用域发出一个向上的事件,并通知哪些注册在rootScope.Scopeemit被启动的地方,事件一直朝着根作用域传递,传递期间并通知哪些注册在作用域上的监听器,如果这期间一个监听器接受到了这个事件,会注销这个事件,那么事件将会停止向上继续传播。 
    这里写图片描述

    <!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.Scopebroadcast被启动开始。下面的所有作用域都会接收到通知。之后,事件向下传播,在这期间,作用域中的监听器接收到通知,获取事件,但是不会注销事件,事件继续往下传播。

    <!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 /><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 
    该服务监听指定类型的事件,获取从emitbroadcast发布的事件。 
    提示:

    1、如果在作用域中没有父子关系存在,可以在控制器中注入$rootScope、使用$broadcast服务向下传播事件,但是不能通过$emit向上传播事件。
    2、在作用域中存在父子关系时,可以也仅可以由子控制器使用$emit服务向上传播事件,同时父作用域中的控制监听器可以注销事件。
  • 相关阅读:
    java面试常见的类
    Day6
    DAY5
    Day4
    Day3
    Day2
    Day1
    echarts3关系图:力引导布局, 固定某些节点
    Hbuilder中配置cmd
    webpack 学习
  • 原文地址:https://www.cnblogs.com/lsr17/p/6373550.html
Copyright © 2020-2023  润新知