zoukankan      html  css  js  c++  java
  • AngularJS $on $broadcast $emit

    如何在作用域之间通信呢?
        1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。
        2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

    $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

    $broadcast、$emit事件必须依靠其他事件(ng-click等)进行触发,而不能单纯写一个这个。。
    $on倒是可以直接写,因为它属于监听和接收数据的。

    $emit只能向parent controller传递event与data
    $broadcast只能向child controller传递event与data
    $on用于接收event与data

    举例:

    html代码

    <div ng-controller="ParentCtrl">                <!--父级-->
        <div ng-controller="SelfCtrl">              <!--自己-->
            <a ng-click="click()">click me</a>
            <div ng-controller="ChildCtrl"></div>   <!--子级-->
        </div>
        <div ng-controller="BroCtrl"></div>         <!--平级-->
    </div>

    js代码

    app.controller('SelfCtrl', function($scope) {
      $scope.click = function () {
        $scope.$broadcast('to-child', 'child');
        $scope.$emit('to-parent', 'parent');
      }
    });

    app.controller('ParentCtrl', function($scope) {
      $scope.$on('to-parent', function(event,data) {
        console.log('ParentCtrl', data);       //父级能得到值
      });
      $scope.$on('to-child', function(event,data) {
        console.log('ParentCtrl', data);       //子级得不到值
      });
    });

    app.controller('ChildCtrl', function($scope){
      $scope.$on('to-child', function(event,data) {
        console.log('ChildCtrl', data);         //子级能得到值
      });
      $scope.$on('to-parent', function(event,data) {
        console.log('ChildCtrl', data);         //父级得不到值
      });
    });

    app.controller('BroCtrl', function($scope){  
      $scope.$on('to-parent', function(event,data) {  
        console.log('BroCtrl', data);          //平级得不到值  
      });  
      $scope.$on('to-child', function(event,data) {  
        console.log('BroCtrl', data);          //平级得不到值  
      });  
    });


    $emit和$broadcast可以传多个参数,$on也可以接收多个参数。

    $on的方法中的event事件参数:
        event.name 事件名称
        event.targetScope  发出或者传播原始事件的作用域
        event.currentScope 目前正在处理的事件的作用域
        event.stopPropagation()    一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用$emit发出的事件)
        event.preventDefault() 这个方法实际上不会做什么事,但是会设置defaultPrevented为true。直到事件监听器的实现者采取行动之前它才会检查defaultPrevented的值。
        event.defaultPrevented 如果调用了preventDefault则为true

  • 相关阅读:
    【POJ3358】Period of an Infinite Binary Expansion-欧拉定理+数论好题
    【POJ3696】The Luckiest Number-欧拉定理+快速幂
    【POJ3090】Visible Lattice Points-欧拉函数应用
    【POJ3090】Visible Lattice Points-欧拉函数应用
    【POJ2891】Strange Way to Express Integers-解一元线性同余方程组
    【POJ2891】Strange Way to Express Integers-解一元线性同余方程组
    【POJ2429】GCD & LCM Inverse-Pollard-rho分解+枚举
    【POJ2429】GCD & LCM Inverse-Pollard-rho分解+枚举
    【POJ1811】Prime Test-Miller-Rabin素数测试+Pollard-rho大数分解
    deleted
  • 原文地址:https://www.cnblogs.com/lyy-2016/p/5689111.html
Copyright © 2011-2022 走看看