javascript - $http 服务的回调方法如何通知 Angular 模型更改？

Question

给定以下 AngularJS 控制器：

function PhoneListCtrl($scope, $http) {
  $scope.phones = {};    

  $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data.splice(0, 5);
  });

  $scope.orderProp = 'age';
}

使用该代码（来自 Angular 官方教程），绑定phones模型的模板将被更新以反映收到的 JSON 响应。但是，如果您将 $scope 更新包装在setTimeout如下语句中：

function PhoneListCtrl($scope, $http) {
  $scope.phones = {};    

  $http.get('phones/phones.json').success(function(data) {
    setTimeout(
        function(){
            $scope.phones = data.splice(0, 5);
        }, 
        5000
    );
  });

  $scope.orderProp = 'age';
}

模板将不会更新，在这种情况下，角度代码似乎无法识别模型更改。

我的问题很明显：为什么它在第二种情况下不起作用？$http 回调中的模型更改如何通知角度运行时？

Answer 1

当您使用 setTimeout 时，您会在角度框架之外执行回调函数（即使它没有延迟）。如果你想在 Angular 中更改这个函数，你必须通过使用通知 Angular $scope.$apply- 像这样：

setTimeout(
  function(){
    $scope.$apply(function(){
      $scope.phones = data.splice(0, 5);
    }
   },5000);

如果你必须使用 setTimeout 你应该看看$timout 服务。