我是棱角分明的新人,仍然在努力学习基础知识。
我的菜单中有一个购物车图标,首次加载时预设值为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>
答案 0 :(得分:2)
您的错误不是角度错误,而是javascript版本。
当你这样做时:
$scope.cart = sharedService.cart;
您指定的值不是引用,换句话说,它是原始值的副本,对sharedService.cart
所做的更改不会影响变量$scope.cart
在javascript中,原始变量是按值通过引用分配的,因此您可以做的是将对象分配给$scope.cart
这是一个带有它工作示例的plunker https://plnkr.co/edit/MKSofFcgEWMjwQaOvLsP?p=preview