我无法使用setTimeout函数在数组中添加项目

Question

我正在尝试通过将新条目推入数组来更新ui但由于某种原因，直到阵列上的下一个操作才会更新ui。

function TestCtrl($scope){
  $scope.projects = [{name: "project1"}];

  $scope.test = function(){ return "batman"; };

  $scope.addNew = function(){
    $scope.projects.push({name: "project2"});
    setTimeout(function(){
      $scope.projects.push({name: "project3"});
    }, 1000);
  };
}

这是一个例子http://jsbin.com/itasis/4/edit

我还没有测试过，但我希望ajax请求中的行为存在同样的问题。

Answer 1

使用$timeout代替setTimeout。 $timeout会自动为我们调用$apply()，触发Angular digest cycle，这将更新需要刷新的所有视图。

关于AJAX，我建议您使用Angular的$http服务，该服务也会为我们调用$apply()。否则，在AJAX回调中，在更新Angular模型/范围后，手动调用scope.$apply()。