如何从一个控制器刷新另一个控制器的计数器值 angularjs

Question

我在 header 控制器中有一个购物车计数器。以及图像视图控制器中的添加到购物车按钮。我想从图像视图控制器设置购物车计数器。所以每次点击添加到购物车都会改变购物车的价值。

Header 控制器：

 decorpotCtrls.controller('DecorpotCtrl', [ '$scope', '$routeParams', 'cart',
    function($scope, $routeParams, cart) {
        $scope.cartCounter = cart.getCartCounter();
    } ]);

图像控制器：-

  decorpotCtrls.controller('ImageViewController', [
    '$scope',
    '$routeParams',
    'imageView',
    '$auth',
    'cart',
    function($scope, $routeParams, imageView, $auth, cart) {

    $scope.addToCart = function(groupid) {
            console.log($auth.isAuthenticated());
            return cart.addToCart(groupid);

        };

    } ]);

购物车 Html : -

  <i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i> Cart({{cartCounter}})

从图像控制器添加到购物车 -

 <div id="addToCart" class="btn btn-primary btn-lg buyNCartButton" ng-click="addToCart(groupid)">Add To Cart</div>

购物车服务 -

services.service('cart', function($http){
    var counter =0 ;
    sessionStorage.setItem('cartCounter', counter);
    //var 
    return {
        checkout : function(){

        },

        addToCart : function(gruopid){

            counter++;
            return counter;
        },

        getCartCounter : function(){
            return counter;
        }

    };
});

Answer 1

在控制器中使用 $rootScope。所有 $scope 都是 $rootScope 的 "childs"。

decorpotCtrls.controller('ImageViewController', [
'$rootScope',
'$scope',
'$routeParams',
'imageView',
'$auth',
'cart',
function($scope,$rootScope, $routeParams, imageView, $auth, cart) {

$scope.addToCart = function(groupid) {
        $rootScope.counter++;
        console.log($auth.isAuthenticated());
        return cart.addToCart(groupid);

    };

} ]);

Answer 2

你可以做一件事将方法引用设置为 $scope.cartCounter 比如

$scope.cartCounter = cart.getCartCounter;

然后在 HTML 上，您可以像 cartCounter() 那样调用该方法，该方法将在每个摘要上进行评估。

<i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i> 
Cart({{cartCounter()}})

如何从一个控制器刷新另一个控制器的计数器值 angularjs

how to refresh counter value of one controller from another angularjs

javascript

angularjs

angularjs-service

angularjs-scope

angularjs-controller