zoukankan      html  css  js  c++  java
  • angularjs的$on、$emit、$broadcast

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

    $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
    $emit:子传父 传递event与data
    $broadcast:父传子 child controller传递event与data
    $on:监听或接收数据。。用于接收event与data

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


    $on的方法中的event事件参数:
    event.name 事件名称
    event.targetScope 发出或者传播原始事件的作用域
    event.currentScope 目前正在处理的事件的作用域

    event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
    event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
    event.defaultPrevented 如果调用了`preventDefault`则为true

    <style>
        div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;}
    </style>
    <div ng-controller="ParentController"><!--父级-->
        <div  ng-click="clkP()">click--给child</div>
        <div ng-controller="OneSelfController"><!--自己-->
            <span ng-click="clkme()">click me</span>
            <div ng-controller="ChildController">
                它是OneSelfController的子级
            </div><!--子级-->
        </div>
        <div ng-controller="siblingsController">
            它与OneSelfController是平级
        </div><!--平级-->
    </div>
    
    <script>
        var app=angular.module('firstApp',[]);//app模块名
        app.controller('OneSelfController',function($scope){
            $scope.clkme=function(){
                $scope.$broadcast('sendChild','我给子控制器传递数据');
                $scope.$emit('sendParent','冒泡到父元素')
            }
        }).controller('ParentController',function($scope){
            $scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件
                console.log('OneSelfController传过来的',data,event.name,event);//事件名称:sendParent
            });
            $scope.clkP=function(){
                $scope.$broadcast('sendAllChild','让siblingsController接收到');
            }
    
        }).controller('ChildController', function($scope){
            $scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件
                console.log('ChildCtrl', data,event.name,event);// 事件名称:sendChild
            });
        }).controller('siblingsController', function($scope){
            $scope.$on('sendAllChild',function(event,data) {
                console.log('值过来吧', data);
            });
            //下面事件不会触发
            $scope.$on('sendParent', function(event,data) {
                console.log('平级得不到值', data);
            });
            $scope.$on('sendChild', function(event,data) {
                console.log('平级得不到值', data);
            });
        });
    
    </script>

    原文地址:http://www.cnblogs.com/yuzhongwusan/p/4938816.html

  • 相关阅读:
    How to change hostname on SLE
    How to install starDIct on suse OS?
    python logging usage
    How to reset password for unknow root
    How to use wget ?
    How to only capute sub-matched character by grep
    How to inspect who is caller of func and who is the class of instance
    How to use groovy script on jenkins
    Vim ide for shell development
    linux高性能服务器编程 (二) --IP协议详解
  • 原文地址:https://www.cnblogs.com/qianmojing/p/6081719.html
Copyright © 2011-2022 走看看