角度指令未获取更新的控制器数据

Question

我有一个表单，其中一个选择是数据来自后端生成的数组的字段。

我遇到的问题是控制器有一个空数组来存储数据。 然后，此数组由对后端的请求填充。唯一的问题是指令不使用更新的数据，它只使用在控制器上创建的空数组。

我使用了所附的 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

有两个问题。

第一：

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

在超时触发器之前调用，因此两个值均为 null。

第二： 您需要更改 setTimeout 以使用$timeout。结果应该是：

$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);

$timeout的工作方式与setTimeout非常相似，但它将回调函数包装在一个$apply中，以确保Angular看到更改。

您尚未发布 AJAX 请求，但您应该查看$http以提出请求，这意味着结果将被 angular 看到。 请参阅：https://docs.angularjs.org/api/ng/service/$http