配列が置換されたときにサービス配列へのスコープバインディングが更新されない理由

Question

サービスに格納されている配列にスコープバインディングがあります。 配列が変更されると、スコープは変更を認識し、テンプレート内の値を更新します。

しかし、配列が別の配列に置き換えられると、スコープは変更を認識していないように見え、リストを更新しません。

私はこれがangularjsの一般的な振る舞いであり、これはおそらくこのように意図されていることを知っていますが、私は理由を知りません。 私の理解では、範囲参照が変更されるたびにスコープ変数が更新されるはずです。

$scope.myVar = anyOtherVar;は$scope.$watch('anyOtherVar',function(..){//update myVar});と等価ではありませんか？

問題を示すために私のフィドルを見てください。 http://jsfiddle.net/sL9k7q9L/1/

var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
myApp.factory('myService', function() { 
    var anyArray = [{"name":"peter"}]; 

    var anyOtherArray = [{"name":"laura"}]; 

    return { 
    anyArray: anyArray, 
    newElement: function(){ 
     anyArray.push({"name":"bob"}); 
    }, 
    replaceWholeArray: function(){ 
     anyArray = anyOtherArray; 
     console.log(anyArray); 
    } 
    } 
}); 

function MyCtrl($scope,myService) { 
    $scope.elements = myService.anyArray; 
    $scope.newElement = function(){ 
     myService.newElement(); 
    } 
    $scope.replaceWholeArray = function(){ 
     myService.replaceWholeArray(); 
    } 
} 

と対応するテンプレート：

<div ng-controller="MyCtrl"> 
    <button ng-click="newElement()"> 
    newElement() 
    </button> 
    <button ng-click="replaceWholeArray()"> 
    replaceWholeArray() 
    </button> 
    <ul> 
    <li ng-repeat="el in elements">{{el.name}}</li> 
    </ul> 
</div> 

Answer 1

あなたは、変数を更新しているが、それは、元の変数を使用して作られた、他の変数の割り当てを更新しません。

したがって、元の配列への参照をmyService.anyArray

単純例えば壊れている

var a = 1; 
var b = a; 
a = 2; 
alert(b);// is still 1 due to value of `a` when it was assigned 

代わりにちょうどファクトリオブジェクトのプロパティを更新していますが

最初に返されたオブジェクトへの参照を格納する必要があることを行うために

myApp.factory('myService', function() { 
    var anyArray = [...]; 

    var anyOtherArray = [...]; 

    var factoryObject = { 
    anyArray: anyArray, 
    newElement: function() { 
     anyArray.push({"name": "bob"}); 
    }, 
    replaceWholeArray: function() { 
     // change this part 
     //anyArray = anyOtherArray; 
     // To: 
     factoryObject.anyArray = anyOtherArray; 
    } 
    } 

    return factoryObject 
});