Zwei-Wege-Bindung Angularjs Bug

Question

Meine eckige App verwendet mehrere Controller und alle von ihnen verwenden die Zwei-Wege-Bindung perfekt in Ordnung außer diesem. Aus irgendeinem Grund werden die Scope-Variablen in meinem angular.extend nicht aktualisiert, wenn ich die Variable zu einem späteren Zeitpunkt ändere. Hier ist, was ich tue:

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, 
    } 
}); 

Und wenn ich will einen Artikel in den Warenkorb legen, ich mache:

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

Wenn ich meinen $ scope.cart.products in der addToCart Funktion console.log, es zeigt die neu hinzugefügte Produkt, aber dann, wenn ich es in meiner Ansicht aktualisiert haben wollen, ist es nicht fügen sie einfach das gewünschte Produkt nicht in die Liste:

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

wird das Produkt wie dieses

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

hinzugefügt Was mache ich falsch?

Answer 1

Sie haben ng-controller zweimal in html verwendet. Daher gibt es für jede Deklaration zwei verschiedene Bereichsobjekte. Fügen Sie folgenden Code innerhalb des ersten Controllerbereichs hinzu.

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

Wenn Sie tatsächlich sehen möchten, ob es zwei verschiedene Controller gibt. Konsolen Sie einfach $ scope-Objekt im Controller. Es wird zunächst zweimal gedruckt. Sie können Objekt-ID von $ Umfang als

console.log($scope.$id); 

können Sie verschiedene IDs sehen.

Answer 2

Wenn Sie die ng-controller-Direktive verwenden, wird ein neuer untergeordneter Bereich erstellt und die Controller-Funktion wird mit einem neuen $ scope instanziiert. In Ihrem Fall verwenden Sie zwei ng-Controller, daher haben sie einen anderen $ scope. Versuchen Sie, denselben Code unter einem einzigen ng-Controller zu schreiben, es wird funktionieren.

Für Ihre Referenz Angular Docs - Understanding Controllers