双方向バインディングAngularjsのバグ

Question

私の角型アプリケーションは、複数のコントローラを使用しています。何らかの理由で、変数を後で変更するときに、angle.extend内のスコープ変数を更新していません。ここで私は何をすべきかです：

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関数の中で私の$ scope.cart.productsをCONSOLE.LOGとき

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

、これは、新しく追加された製品を示しているが、私はそれが私の見解で更新したいときに、それだけでリストに製品を追加しません：

<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> 

私が間違って何をやっているように追加されますか？

Answer 1

ng-controllerをhtmlで2回使用しました。したがって、宣言ごとに2つの異なるスコープオブジェクトが存在します。 最初のコントローラースコープ内に次のコードを追加します。

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

実際に2つの異なるコントローラがあるかどうかを確認したい場合は、コントローラ内の$ scopeオブジェクトをコンソール化するだけです。最初は2回印刷されます。 $ scopeのオブジェクトIDは、

console.log($scope.$id); 

と表示されます。異なるIDが表示されます。

Answer 2

ng-controllerディレクティブを使用すると、新しい子スコープが作成され、新しい$ scopeでコントローラ関数がインスタンス化されます。あなたのケースでは、2つのngコントローラを使用しているので、異なる$ scopeを持ちます。単一のng-controllerの下で同じコードを書こうとすると、うまくいくでしょう。

参考のためAngular Docs - Understanding Controllers