サービス上のリストを置き換えて、ビュー内で変更を参照してください

Question

コントローラ付きの角型アプリケーションがあります。私はまた、データのリストを保持するサービスを持っています - キー値を持つオブジェクトの配列。時折、リストはランダムに変化します。このサービスはリストをコントローラに公開します。私のテンプレートでは、リストを 'リピート'しています。問題は、サービスのリストを更新すると、ビューのリストを更新する方法がわかりません。リストの変更はデータレベルでのみ行われますが、UIレベルでは行われません。 既存のリストを更新すると、uiの変更が表示されますが、リストを別のものに置き換えると、ビューは更新されません。第$timeoutで

plunker demonstration

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

app.controller('MainCtrl', function($scope, getData) { 
    $scope.values = getData.values 
}); 

app.factory('getData', function($timeout){ 
    var values = [{key:"Good", value:"Morning"}]; 
    console.log(values) 

    $timeout(function(){ 
    values.push({key:"Good", value:"Afternoon"}) 
    console.log(values) 
    }, 500) 

    $timeout(function(){ 
    values = [{key:"Good", value:"Night"}] 
    console.log(values) 
    }, 1000) 

    return{ 
    values:values 
    } 
}); 

Answer 1

は、オブジェクトの新しい参照を作成することによってvalues変数に値を代入しています。それが、新たに割り当てられた配列が見えない理由です。

代わりに新しい参照を作成するだけで、現在の配列をクリアし、現在のオブジェクトを新しい値で拡張することができます。したがって、オブジェクトの参照は保存され、関連するバインディングはそのまま動作します。

コード

$timeout(function() { 
    values.length = 0; //clearing array 
    //extending current object with new values 
    angular.extend(values, [{ 
     key: "Good", 
     value: "Night" 
    }]) 
    //instead of doing extend you can just push an objet as well. 
    //values.push({ key: "Good", value: "Night" }]); 
    console.log(values) 
}, 1000); 

Demo Plunkr

Answer 2

これは、あなたが新しいリストを作成し、値に割り当てたときに発生します。 $scope.valuesはサービスのvaluesを指すように設定されています。そのため、同じリストを更新すると（最初のタイムアウト時にpushを使用した場合と同じように）、コントローラはその変更を認識します。 2回目のタイムアウトでは、全く新しいリストをvaluesに割り当てますが、コントローラーは引き続き元のリストを指しています。

変更修正するために、次の2番目のタイムアウト：

$timeout(function(){ 
    values.splice(0, values.length); 
    values.push({key:"Good", value:"Night"}) 
    console.log(values) 
}, 1000);