值未更新

Question

我是 Angular 新手，但仍在努力学习基础知识。

我的菜单中有一个购物车图标，首次加载时预设值为 0。

在产品列表中，每个产品都有一个按钮来显示“AddToCart”。 所以我想要的是-

我想在点击AddToCart 按钮时更新购物车值。但是购物车的初始值是通过角度设置的，但我无法进一步更新它。

这是代码-

var app = angular.module("productsApp", [])
.factory("sharedService", ['$rootScope', function ($rootScope) {
        var sharedServiceRef = {
            cart: 0,
            setCartValue: function (product) {
                if (product) {
                    this.cart = this.cart + 1;
                    sharedServiceRef.cart = this.cart;
                }
                else {
                    sharedServiceRef.cart = 0;
                }
                console.log(sharedServiceRef.cart);
            }
        };
        return sharedServiceRef;
    }]);


function ProductListController($scope, sharedService) {
    $scope.addItemToCart = function (product) {
        sharedService.setCartValue(product);
    }
}

function CartController($scope, sharedService) {
    $scope.cart = sharedService.cart;
}

在页面初始加载时，它会在视图中设置购物车的值-

<div ng-controller="CartController">
       {{cart}}
    </div>

当我更改另一个控制器中的值并设置它时 -

function ProductListController($scope, sharedService) {
    $scope.addItemToCart = function (product) {
        sharedService.setCartValue(product);
    }
}

它不会更新购物车值，它首先保持为 0。

如何更新 Angular 中的值？

编辑 这是我调用添加按钮的视图 -

<div ng-controller="ProductListController">
    <div ng-repeat="product in products">
        <span>
            $ {{product.salePrice}}
        </span>
        <div>
            <a ng-click="addItemToCart(product)">
                Add To Cart
            </a>
        </div>
    </div>
</div>

Answer 1

您的错误不是角度错误，而是 javascript 错误。

当你这样做时： $scope.cart = sharedService.cart;

您分配的值不是引用，换句话说，它是原始值的副本，对sharedService.cart 所做的更改不会影响变量$scope.cart

在 javascript 中，原始变量是按值分配的，而对象是通过引用分配的，所以您可以将一个对象分配给 $scope.cart

这是一个 plunker 及其工作示例 https://plnkr.co/edit/MKSofFcgEWMjwQaOvLsP?p=preview