• 在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服务向上传播事件,同时父作用域中的控制监听器可以注销事件。
  • 相关阅读:
    小结:机器学习基础部分
    概率图:HMM:Evaluation问题(前向算法/后向算法)
    概率图:GMM求解:EM优化算法的导出(从【ELBO+KL】和【ELBO+Jensen】两个角度导出)
    概率图:GMM:EM算法及其收敛性证明
    概率图:高斯混合模型(GMM)
    概率图基础:D-separation;全局Markov性质;Markov Blanket
    概率图基础:概率基本概念、条件独立性、图求解联合概率的规则合理性推理
    mysql索引失效
    mysql 统计行数count(*)
    mysql如何收缩表空间
  • 原文地址:https://www.cnblogs.com/lsr17/p/6373550.html
Copyright © 2020-2023  润新知