2

我正在使用 angularjs 为电子商务网站制作前端，到目前为止我遇到的唯一问题与购物车实现有关。我有一个提供该Cart功能的服务，该功能具有原型方法add、change和remove购物车中的项目。这是它的一个非常基本的版本（它包含在服务声明中）：

var Cart = function(){
  this.items = [];
  this.total_price = 0;
  this.item_count = 0;
}

Cart.prototype.getItems = function(){ return this.items }
Cart.prototype.getTotal = function(){ return this.total_price }

// Add a product to the cart
Cart.prototype.add = function(product, variant, qty){
  // Check if the item is already in the card and add to the quantity
  // or create the line item and add it to the list
  this.items.push(item)

  // Update totals
  this.total_price += product.price * qty;
  this.item_count += qty;
  console.log('Added product. total:', this.getTotal())
}

// Modify a product in the cart
Cart.prototype.change = function(product, variant, qty){
  // Find the item or error

  existingItem.quantity += qty;
  existingItem.line_price += existingItem.price * qty;
}

// Remove an item from the cart
Cart.prototype.remove = function(item){
  var index = this.items.indexOf(item);
  if (index !== -1) {
    this.total_price -= item.line_price;
    this.item_count -= item.quantity;
    this.items.splice(index, 1);
  }
  console.log('Removed line item. total:', this.getTotal())
}

return new Cart;

这段代码在直接使用时似乎运行良好，但在控制器中绑定时出现了一个奇怪的问题。这是购物车控制器：

app.controller('CartCtrl', [
  '$scope',
  'Cart',
  function($scope, Cart) {
    $scope.items = Cart.getItems();
    $scope.total = Cart.getTotal();
    $scope.delete = function(item){ Cart.remove(item) };
  }
]);

当我将产品添加到购物车时，$scope.items会更新并显示在ng-repeated 列表中，但$scope.total绑定什么也不做。我知道它实际上是在更新，因为我console.log在调试的时候到处都放了 s。我也尝试$rootScope.$apply()在更新总数后调用，但它只是错误，因为它已经在运行。

有没有人有任何想法？谢谢你的帮助！

4

1 回答 1

3

看看这是否是你的问题......这条线

$scope.total = Cart.getTotal();

在 $scope 上创建一个total属性，由于 getTotal() 返回一个原始值，所以 $scope.total 设置为 0。这里没有绑定，所以当 Cart 的 total_price 发生变化时，$scope.total 不会更新。

（$scope.items 将在 Cart 的 items 更改时更新，因为 $scope.items 被分配了对 items 数组的引用。）

于 2013-01-30T04:36:06.107 回答