AngularJS beobachtete Eigenschaft von Fabrikobjekten - unerwartetes Verhalten

Question

Ich möchte ein bestimmtes Verhalten von AngularJS verstehen, wenn es darum geht, Änderungen von Objekten zu beobachten, die von einer Fabrik bereitgestellt werden.

Es gibt ein anderes Verhalten abhängig davon, ob ich eine Eigenschaft eines Factory-Objekts im Controller oder im HTML lesen.

Vergleichen Sie die folgenden zwei Möglichkeiten, eine Immobilie in der Ansicht angezeigt wird:

app.controller("testController", function($scope, testFactory){ 
    $scope.test_obj = testFactory.read(); 
    $scope.test_prop = testFactory.read().prop; 
}); 

<div>{{test_obj.prop}}</div> 
<div>{{test_prop}}</div> 

Wenn die Eigenschaftsänderungen in der Testfactory, die Änderung in der Ansicht im ersten Fall nur aktualisiert wird, wenn das ganze Objekt ist deklariert zu Geltungsbereich und die Eigenschaft wird in der Ansicht aufgerufen. Wenn die Eigenschaft direkt für den Bereich deklariert ist, wird sie in der Ansicht nicht automatisch aktualisiert. für dieses Verhalten https://jsfiddle.net/fb86p4fm/

Was ist der Grund:

Dieses Verhalten kann in der folgenden jsfiddle zu beachten?

Answer 1

$ scope.test_prop = testFactory.read(). Prop;

In der obigen Zeile ist der Anfangswert von prop 0. In JavaScript werden Zahlen nach Wert kopiert, aber Objekte/Arrays sind durch Verweis. $ scope.test_obj referenziert das Serviceobjekt, $ scope.test_prop dagegen nicht.

Answer 2

Ich würde sagen, dass $scope.test_obj ist ein Verweis auf die Fabrik obj, während $scope.test_prop ist ein kopierter Wert von obj.prop.

Wenn Sie das folgende in Beispiel hinzufügen:.

console.log(testFactory.read()); // output : Object {prop: 0} 
console.log(testFactory.read().prop); // output 0 

Sie würden sehen, dass das Leseverfahren ein Objekt zurückgeben würde und die Lese() prop Wert zurückkehren würde.