angularjs - 我无法使用 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 摘要循环，它将更新任何需要刷新的视图。

关于 AJAX，我鼓励您使用 Angular 的$http服务，这也需要$apply()我们。否则，在您的 AJAX 回调中，在更新您的 Angular 模型/范围后，手动调用scope.$apply().