zoukankan      html  css  js  c++  java
  • 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

    <!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>
    
  • 相关阅读:
    二、Spring Cloud 之旅 -- Eureka 微服务的发布与调用
    一、Spring Cloud项目搭建
    intellij 破解
    Koa.js 2.x 学习笔记
    MongoDB 学习笔记
    在github上部署静态网页
    vue绑定值与字符串拼接两种写法
    Vue的生命周期及其相应的三个阶段解读
    element-ui 报错 Invalid prop: custom validator check failed for prop "index"
    StyleLint 使用指南
  • 原文地址:https://www.cnblogs.com/guozhe/p/7662413.html
Copyright © 2011-2022 走看看