雙向綁定Angularjs bug

我的角應用程序使用多個控制器，它們都使用雙向綁定，除了這一個以外，它們完全正確。出於某種原因，當我稍後更改變量時，它不更新我的angular.extend中的範圍變量。這是我做的：雙向綁定Angularjs bug

angular.extend($scope, { 
    cart: { 
     products: [ 
      {amount: 1, name: 'product 1', total: 4.95}, 
      {amount: 4, name: 'product 2', total: 4.95}, 
      {amount: 2, name: 'product 3', total: 4.95}, 
     ], 
     deliveryCost: 0, 
     total: 0, 
     orderContinue: false, 
    } 
});

而當我想以一個產品添加到購物車我做的：

addToCart: function(id) { 
    var newProduct = {amount: 1, name: 'product 4', total:5.94}; 
    $scope.cart.products.push(angular.extend(newProduct)); 
}

當我CONSOLE.LOG我的$ scope.cart.products在addToCart功能，它顯示了新添加的產品，但後來當我想它已經在我看來更新，它只是不將產品添加到列表：

<div class="row" ng-controller="cartController"> 
<div class="col-md-12"> 
    <h4>Cart</h4> 
    <div class="row" ng-repeat="products in cart.products"> 
     <div class="col-md-2"> 
      {{products.amount}} 
     </div> 
     <div class="col-md-8"> 
      {{products.name}} 
     </div> 
     <div class="col-md-2"> 
      <a href="#">X</a> 
     </div> 
    </div> 
</div>

產品會添加類似這樣的

<div ng-controller="cartController" class="col-xs-4 col-sm-2 col-lg-2" style="border: 1px solid black;"> 
    <button ng-click="addToCart(1)">Add to</button> 
</div>

我在做什麼錯？

來源

2016-09-28 BigBawss

爲什麼你使用'angular.extend'這裏？對於你在做什麼而言，這似乎不是必要的。你應該只能說'$ scope.carts - {cart：....}'和'$ scope.cart.products.push（{...}）'。我的直覺是，你使用angular.extend不會觸發一個會導致視圖更新的摘要循環。 – ryanlutgen

這是因爲你有'cartController'在HTML中聲明兩次 - 那些控制器不共享實例，它們都創建自己的實例。 – tymeJV

你已經在html中使用了ng-controller兩次。所以每個聲明都會有兩個不同的範圍對象。在第一個控制器範圍內添加以下cod。

<button ng-click="addToCart(1)">Add to</button>

如果你想看看實際上是否有兩個不同的控制器。只需在控制器中安裝$ scope對象。它最初將打印兩次。您可以看到$ scope的對象ID爲

console.log($scope.$id);

您可以看到不同的ID。

來源

2016-09-28 16:48:33

無論何時使用ng-controller指令，都會創建一個新的子作用域，並使用新的$作用域實例化控制器函數。在你的情況下，你使用兩個ng控制器，因此他們將有不同的$範圍。嘗試在單個ng控制器下編寫相同的代碼，它會起作用。

供您參考Angular Docs - Understanding Controllers

來源

2016-09-28 19:13:08 prasad

雙向綁定Angularjs bug

回答

相關問題