2

angularjs を使用して e コマース サイトのフロント エンドを作成していますが、これまでに遭遇した唯一の問題は、カートの実装に関連しています。、、およびカートのアイテムCartへのプロトタイプメソッドを持つ関数を提供するサービスがあります。これは非常に基本的なバージョンです (サービス宣言にラップされています)。addchangeremove

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 に設定されます。ここにはバインディングがないため、カートの total_price が変更されても $scope.total は更新されません。

( $scope.items には items 配列への参照が割り当てられているため、カートのアイテムが変更されると $scope.items が更新されます。)

于 2013-01-30T04:36:06.107 に答える