AngularJS材质：onRenderComplete事件

Question

情况：我们使用AngularJS Material。将数据渲染到设计中需要一些时间（最多几秒）。

问题：对于此等待时间，我们希望显示一个加载元素，以通知用户该网站正在运行。但是，事件是什么？如何实现这一目标？

到目前为止我们尝试过（但没有奏效）：

$scope.loading = true; //shows a loading throbber

$http.get('/data.json').success(function(afts){
    $scope.afts = afts;
    $scope.loading = false; //hides the loading throbber
});

然而，这仅显示加载时间为几分之一秒，因为耗时部分不加载数据，而是渲染数据（将数据/ afts分配给$ scope时会发生什么）。

是否有另一个事件在完成此新数据的呈现时被触发？

渲染数据时的样子：

这就是它现在的样子：

重现步骤：

1. 访问[示例不再可用。 AngularJS太慢了，我们用更快的技术替换它]
2. 在左上角输入一个位于＆＃34; Mein Start-Ort（Adresse）的位置
3. 从下拉列表中选择一个位置，或点击＆＃34; ENTER＆＃34;
4. 然后，您将看到秒的间隔，直到您看到下面列出的项目。在此期间，应该出现装载悸动，但尚未出现。

Answer 1

你可以拆分源数组 - 首先是一些（比方说5个）项目。等几秒钟，然后推动其他人。

这样的事情（这是虚拟的例子，Just POC）：

angular.module('app', []).
controller('ctrl', function($scope, $timeout) {
  var sourceArr = 'abcdefghijklmnopqrstuvwxyz'.split('');
  $scope.items = sourceArr.slice(0, 5);
  $timeout(function() {
    $scope.items.push(...sourceArr.slice(5, sourceArr.length));
  }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

这是一个天真的解决方案。您可以像this answer一样使用更智能的代码。