角型ディレクティブがコントローラデータを更新しない

Question

私は、選択肢の1つがデータがバックエンドによって生成された配列から来るフィールドであるフォームを持っています。

私が持っている問題は、コントローラにデータを格納する空の配列があることです。 この配列は、バックエンドへの要求によって作成されます。唯一の問題は、コントローラー上に作成された空の配列のみを使用する更新データをディレクティブが使用していないことです。

添付ファイルplunkrのこのディレクティブを使用しました。 http://plnkr.co/edit/J7bQoSKe17VQ5i6RPxps?p=info

setTimeoutは、私のajax呼び出しのように動作します。

 //Very big arry that will become all the available choices. 
    vm.allItems = []; 

    // 'Loaded' after time to act like async ajax request to server. 
    setTimeout(function(){ 
    for (var i = 0; i < 9500; i++) { 
    var person = { 
     name: 'Adam' + i, 
     email: 'adam' + i + '@email.com', 
     age: 12, 
     country: 'United States' 
    }; 
    vm.allItems.push(person); 
    } 
    document.getElementById('status').innerHTML = 'Loaded: ' + vm.allItems[4].name + ' and others.'; 
    }, 1500); 

私はステータスデータの更新をテストして、データがいつ存在するかを確認しました。

前もって感謝します。

Answer 1

2つの問題があります。

まず：タイムアウトがそう両方の値がnullでトリガする前に

vm.multipleDemo.selectedPeople = [vm.allItems[500], vm.allItems[4]]; 

が呼び出されます。

秒： $ timeoutを使用するには、setTimeoutを変更する必要があります。結果は次のようになります。

$timeout(function(){ 
for (var i = 0; i < 9500; i++) { 
var person = { 
    name: 'Adam' + i, 
    email: 'adam' + i + '@email.com', 
    age: 12, 
    country: 'United States' 
}; 
vm.allItems.push(person); 
} 
vm.multipleDemo.selectedPeople = [vm.allItems[500], vm.allItems[4]]; 
document.getElementById('status').innerHTML = 'Loaded: ' + vm.allItems[4].name + ' and others.'; 
    }, 1500); 

$タイムアウトがかなりのsetTimeoutのように動作しますが、それは$変更は、角度によって見られることを保証する適用でコールバック関数をラップします。

あなたのAJAXリクエストは掲載されていませんが、あなたのリクエストを行うために$ httpを見てください。これは結果が角度で表示されることを意味します。 参照：https://docs.angularjs.org/api/ng/service/ $ http