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

时间:2017-07-14 11:49:13

标签: javascript angularjs angularjs-directive

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

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

我使用了附带的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);

我只是在测试更新状态元素以查看数据何时出现。

任何帮助表示赞赏!提前谢谢。

1 个答案:

答案 0 :(得分:1)

有两个问题。

首先:

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

在超时触发之前调用,因此两个值都为空。

第二: 您需要更改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