Question

在AngularJS项目中，我能够通过调用$ scope.loadEvent来显示事件列表，但是在使用$ http和$ timeout轮询服务器时无法更新视图。我可以看到正在进行/接收正确的$ http呼叫和响应。

控制器的精简版本：

function EventsCtrl ($scope, $http, $timeout) {

  $scope.myEvents = new Array();
  var newMyEvents = new Array();

  $scope.loadEvent = function(eventId) {
    $http.get('http...').success(function(result) {
        $scope.myEvents.push(result.data);
    });
  }

  $scope.polling = function () {
      var poller = function() {
          newMyEvents = [];
          for(var i=0; i< $scope.myEvents.length; i++) {
              $http.get('http...').success(function(result) {
                  newMyEvents.push(result.data);
              });
          }
          $timeout(poller, 2000);
      }
      $scope.myEvents = newMyEvents;
      poller();
  }
}

和视图：

<div ng-controller="EventsCtrl" ng-init="polling()">

我已经尝试了$scope.$apply()，它返回Error: $apply already in progress，因为似乎$ http已经在“Angular内部”。

任何和所有的想法都赞赏。感谢。

Answer 1

在某些情况下，您需要使用$scope.$apply();

尝试执行：

$scope.$apply(function() {
  $scope.myEvents = newMyEvents;
}

修改我完全误解了发生了什么。问题是您正在异步触发所有这些查询，因此您无法知道每个查询何时完成。此外，$ timeout会自动执行$ scope。$适用于您。如果您想控制实际$ apply的时间，可以使用setTimeout()代替。

也许您可以在最后一个$ http请求的回调中执行$scope.myEvents = newMyEvents（您没有100％保证它实际上会获得最后的数据）。最好的方法是对后端执行一次调用，为您提取所有资源，以便您可以直接更新.success函数中的变量。（如果可以实现的话）

More about $apply and how to prevent the error

AngularJS轮询$ http和$ timeout不更新视图

1 个答案: