配列に項目を追加するときにng-list入力が更新されない

Question

モデルに項目を追加するときにng-listを使用した入力が更新されないという奇妙な問題が発生しています。私はより良い問題を説明するためのフィドルを作成しました：http://jsfiddle.net/rtZY3/

// Doesn't update ng-list input 
$scope.tags.push(tag); 

// Does update ng-list input 
var tags = angular.copy($scope.tags); 
tags.push(tag); 
$scope.tags = tags; 

これは上記jsFiddleで<pre>タグによって示されるように$scope.tagsが適切に更新されている、特に以来、期待される行動のように見えるしていません。

Answer 1

これは面白かったです。 ngList directiveのAngularJSソースコードを掘り下げました。

最初の例は、入力フィールドに表示されるコンマ区切りの文字列に配列値を分割する関数であるフォーマッタ関数を起動しないようです。

さらに調査したところ、エラーはngModelディレクティブのcontrollerにあります。フォーマッタは、値が以前の値と厳密に等しくない場合にのみ呼び出されますが、最初の例では同じ配列インスタンスなので、その文はfalseと評価され、テキストフィールドは更新されません。 See the source code。

$scope.$watch(function ngModelWatch() { 
    var value = ngModelGet($scope); 

    // $modelValue and value is the same array instance in your first example 
    if (ctrl.$modelValue !== value) { 
     // ... 
    } 
}); 

2番目の例では、毎回新しい配列インスタンスを作成するため、フォーマッタが実行されます。