Question

在mainPage.html中，我们正在从对象names发送一个表。

 <table>
  <tr ng-repeat="x in names">
  <td>{{ x.Name }}</td>
  <td>{{ x.Country }}</td>
  </tr>
 </table>

当用户点击下一个按钮时，正在调度下一组names的休息请求。我在点击下一个按钮后立即显示加载图像。我想在表格中反映新的数据集之后隐藏加载图像。如何知道angular是否已使用新的数据集更新DOM？

Answer 1

一旦$http呼叫结束，Angular将触发摘要阶段（通过$apply）。在 HTML更新后之后之后执行

在摘要阶段之后确保代码执行的一种方法是使用setTimeout或$timeout。例如：

$http.get(url).success(function() { // Update the scope $scope.data = data; // Wait for the DOM to be up do date (end of digest cycle) $timeout(function() { // Here you can safely remove your loading things }); });

但是，如果Angular添加/删除图像本身（例如使用ng-show或ng-if），那么您不需要事件$timeout：图像将被隐藏在视图正在更新时，从视图同时。这将发生在相同的摘要周期中。

Answer 2

我不确定这是否对你有所帮助但是some1创建了一个onNg-repeatfinished Handler也许你可以将它应用于你的桌子但我不确定 ngrepeatfinishedHandler

Answer 3

我假设您通过$ http请求下一组名称。如果没有，只要您使用promises，相同的模式一般适用于异步操作。

使用以下内容，一切都在Angular运行时中发生。显示/隐藏的数据点与names同时更新，因此它们将在相同的摘要周期中更新，因此在DOM上同时呈现。

一般情况下，将所有内容保持在角度并将所有内容都放在视图中的$ scope范围内，可以很容易地保持同步。

.controller('tableController', function($http, $scope){
    $scope.loading = false;
    $scope.getSomeNames = function(){
       $scope.loading = true; 
       $http.get('names').then(function(reponse){
            $scope.loading = false;
            $scope.names = response.data
       })
    })

})

HTML：

<table ng-controller="tableController">
  <tr ng-repeat="x in names" ng-hide="loading">
  <td>{{ x.Name }}</td>
  <td>{{ x.Country }}</td>
  </tr>
  <tr ng-show="loading"><td>Loading</td></tr
</table>

Answer 4

我同意Dylan Watt的观点，不过我想我会想要使用$ http的内置承诺，如果出现问题，可以通过成功和错误进行更清洁的处理。

设置一个启用加载状态的var，进行ajax调用，在ajax调用成功时更改加载状态（或者在发生错误时执行其他操作）。

$scope.getFunction = function () {
  $scope.loading = true;
  $http.get('/someUrl').
    success(function(data, status, headers, config) {
      $scope.names = data;
      $scope.loading = false;
    }).
    error(function(data, status, headers, config) {
      // gracefully handle the error here
    });
}

如果上述问题无法解决您的问题，请注意以下事项：

不，如果您在响应中说出1000行，那么就是时间 $ http结束时的时间，以及angular的摘要周期时间克服......会有一个明显的滞后......问题是什么是 - 如何识别最后一个摘要周期何时结束 - 进入

一个可能的解决方案（虽然我不相信这是一个很好的方式）将是这篇文章的内容： How to watch the DOM for changes AngularJS

并设置超时以等待在设定的一段时间内没有发生DOM更改。我没有看到任何可以识别最后一个$摘要周期特定发生的地方。在通过ng-repeat爆炸大量数据的情况下，您应该看到一群DOM人口，然后它应该安静。

更好解决方案似乎是使用'element-ready'指令，一旦加载就触发$rootScope.loading = false，如下面的帖子所述： Sending event when angular.js finished loading

AngularJS：如何知道angular何时刷新了视图中的所有绑定

4 个答案: