• AngularJS中Scope间通讯Demo


    在AngularJS中,每一个controller都有对应的Scope,而Scope间有时候需要通讯。比如有如下的一个controller嵌套:

    <body ng-controller="AppCtrl">
    
        <table ng-controller = "ProductCtrl">
            ...
            <tr ng-repeat="product in products">
                <td>{{$index + 1}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price | currency }}</td>
                <td><button ng-click="addToCart(product)">添加到购物车</button></td>
            </tr>
        </table>
    
        <div ng-controller="CartCtrl">
            ...
            <tr ng-repeat="product in cart">
                <td>{{$index+1}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price  | currency}}</td>
                <td><button ng-click="removeFromCart(product)">remove</button></td>
            </tr>
        </div>
    </body>

    对应的controller部分大致是:

    myApp.controller("AppCtrl", function($scope){
        $scope.title = "Product Manager";
    })
    
    myApp.controller("ProductCtrl", function($scope){
        $scope.products = [
            {name:"", price:50},
            ...
        ];
        
        $scope.addToCart = function(){
        
        }
    });
    
    myApp.controller("CartCtrl", function($scope){
        $scope.cart = [];
        $scope.removeFromCart = function(product){
        
        }
    });

    以上,呈现出的Scope间的关系如下:

    $rootScope
    .....$scope of AppCtrl
    ..........$scope of ProductCtrl
    ..........$scope of CartCtrl

    问题来了,ProductCtrl中需要把product放到cart中,cart中需要获取到product,两者之间如何通讯呢


    → 当在ProductCtrl中执行addToCart动作时,让$rootScope发一个广播,通知所有的子Scope

    myApp.controller("ProductCtrl", function($scope, $rootScope){
       $scope.products = [
            {name:"", price:50},
            ...
        ];
        
        $scope.addToCart = function(product){
            //让$rootScope发一个广播,所有子scope都知道了
            $rootScope.$broadcast("addProduct", product);
        }
    })

    可见,$rootScope通过$broadcast方法广播事件,一个实参是事件名称,一个实参是要传递的对象。

    → 在CartCtrl中需要侦听来自$rootScope的事件,同时要把移除product的事件告知更高级别的Scope

    myApp.controller("CartCtrl", function($scope){
        $scope.cart = [];
        
        //子scope要侦听rootScope的事件
        $scope.$on("addProduct", add);
        
        function add(evt, product){
            $scope.cart.push(product);
        }
        
        $scope.removeFromCart = function(product){
            //子scope中的事件告知更高的scope
            $scope.$emit("removeProduct", product);
        }
    })

    可见,在子$scope中通过$on方法侦听来自$rootScope的addProduct事件,并执行一个回调函数;如果在子$Scope中执行一个事件要告知更高级别的Scope,这里是removeFromCart事件,需要通过$emit方法,其中第一个实参也是事件名称,第二个实参是传递对象。

    → 在AppCtrl中针对来自CartCtrl中的removeProduct事件

    myApp.controller("AppCtrl", function($scope){
        $scope.$on("removeProduct", function(evt, data){
            console.log(data.name + "removed");
        })
    })

    可见,也是通过$on方法侦听子$scope中emit发出的事件。

  • 相关阅读:
    ZJOI 2019 划水记
    【博弈论】浅谈泛Nim游戏
    HZNU ACM一日游 2019.3.17 【2,4,6-三硝基甲苯(TNT)】
    BZOJ 1008 越狱 组合数学
    BZOJ 1036 树的统计Count 树链剖分模板题
    BZOJ 1012 最大数maxnumber 线段树
    BZOJ 1001 狼抓兔子 平面图的最小割
    SGU---107 水题
    欧拉回路模板
    hdu-3397 Sequence operation 线段树多种标记
  • 原文地址:https://www.cnblogs.com/darrenji/p/5151834.html
Copyright © 2020-2023  润新知