zoukankan      html  css  js  c++  java
  • 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发出的事件。

  • 相关阅读:
    reids 入门
    关于字典的那些事儿.
    更新阿里源repo出的问题
    关于-编码进阶
    *** 数据类型之间的转化
    关于列表那些事:12.24
    while else 结构体(自测)
    关于切片的步长为正负值 的问题(自测)
    if 嵌套if 的先后顺序的区别 (自测)
    二: python基础数据类型(int,
  • 原文地址:https://www.cnblogs.com/darrenji/p/5151834.html
Copyright © 2011-2022 走看看