zoukankan      html  css  js  c++  java
  • 在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服务向上传播事件,同时父作用域中的控制监听器可以注销事件。
  • 相关阅读:
    编译原理实验2简化版的C语言文法 159
    大数据概述 159
    第三次实验有限自动机的构造与识别 159
    Vue非单文件组件
    vue生命周期
    css3boxsizing
    openCV学习笔记(2)__openCV简单的图片处理(雪花,减少颜色)
    openCV学习笔记(1)__openCV与vs2010环境设置
    CentOS防火墙配置
    CentOS 6初始化配置
  • 原文地址:https://www.cnblogs.com/lsr17/p/6373550.html
Copyright © 2011-2022 走看看