Question

我是棱角分明的新人，仍然在努力学习基础知识。

我的菜单中有一个购物车图标，首次加载时预设值为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。

如何更新角度值？

修改这是我从哪里调用添加按钮的视图 -

<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

价值未更新

1 个答案: