AngularJS：显示加载HTML，直到加载数据

Question

在数据完成加载之前，如何使AngularJS显示加载微调框？

如果我的控制器是$scope.items = [{name: "One"}]静态设置的，并且填充了AJAX加载器$scope.items[0]['lateLoader'] = "Hello"，我希望微调器显示直到AJAX加载完成，然后使用检索到的数据填充绑定范围。

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

此代码立即填充绑定范围，并且如果item.lateLoader为空，则微调框将被替换为空。

我应该如何干净地做这件事？

Answer 1

我会根据其他答案创建一个自定义指令，但是这是没有指令的情况下如何实现的，这可能是在进入更复杂的功能之前学习的好主意。

1. 使用setTimeout模拟ajax调用
2. 加载图标已预加载，并且在加载数据时被隐藏。只是一个简单的ng-hide指令。
3. 在我的示例中没有加载图像，只是一些文本被隐藏了（很明显，您的html将具有正确的css引用）。

演示：http：
//plnkr.co/edit/4XZJqnIpie0ucMNN6egy？p =
preview

视图：

<ul >
  <li ng-repeat="item in items">
    <p>Always present: {{item.name}}</p>
    <p>Loads later: {{item.lateLoader}} <i ng-hide="item.lateLoader"  class="icon icon-refresh icon-spin">loading image i don't have</i></p>
  </li>
</ul>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [{name: "One"}];
  setTimeout(function() {
    $scope.$apply(function() {
     $scope.items[0].lateLoader = 'i just loaded';  
    });
  }, 1000);
});