Question

我有角度消化循环的问题。当我执行http调用并将响应放在$ scope中时，该var在视图上不会更新，直到下一个摘要循环。

E.g。我有一个包含在功能和视图按钮中的folliwing调用，它使用ng-click调用函数。第一次单击按钮时，视图上没有任何内容（已发送http响应并收到响应）。第二次单击该按钮后，使用来自previus响应的数据更新视图，并在下次单击等后更新当前响应...

$scope.loadItems = function(){
   ItemService.getData().then(function(rsp) {
      $scope.items = rsp.data;
    });
}

ItemService.getData（）基本上是包装$ http call：

getData : function(){
    return $http({
    method: 'GET',
    url: '/api/items'
    });
}

和html

<button ng-click="loadItems()">Load</button>

谢谢！

Answer 1

好的，我猜问题如下。我打赌你在ng-repeat中使用$ scope.items，对吗？ e.g。

<ul>
    <li ng-repeat="item in items">
        //Here goes my little item
    </li>
</ul>

右？好吧，有一个问题。 ng-repeat引用“items”集合，一旦引用的集合发生更改，HTML就会更新。但是......做的问题

$scope.items = rsp.data;

是你为“items”分配了一个全新的集合，它没有被ng-repeat引用 - 它仍然引用了未被更改的旧集合。因此，以下内容应该有效 - 在$ scope中使用一个点。

<强>控制器：

$scope.data = {};

ItemService.getData().then(function(rsp) {
    $scope.data.items = rsp.data;
});

查看：

<ul> <li ng-repeat="item in data.items"> //Here goes my little item </li> </ul>

换句话说，问题不在于调用摘要周期 - 它被称为。问题在于滥用$ scope。

This link 应该会有所帮助。它更详细地解释了范围的细微差别。

Answer 2

您需要将getData（）更改为：

getData: function() {
  return $http({
  method: 'GET',
  url: '/api/items'
  }).then(function(response) {
    return response.data;
  }, function(error) {
    return error;
  });
}

和$ scope.loadItems（）到

$scope.loadItems = function(){
   ItemService.getData().then(function(rsp) {
      $scope.items = rsp;
    });
}

AngularJS $ http不会触发摘要循环

2 个答案: