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);
});

Answer 2

我实际上已经使用了一段时间的解决方案,现在效果很好,并且比我认为使用超时更好.我使用$ resource,但你可以用$ http做同样的事情.在我的$ resource对象上,我在以下代码中添加了一些设置为加载为true的位.

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

然后,在我看来,我可以使用:

ng-hide="customer.loaded"

当然,我不会直接在控制器中使用$资源,我将其提取到customerRepository服务,但在这里以这种方式显示它更简单.

Answer 3

我会创建自定义指令并使用微调器放置默认标记.

以下是自定义指令的一些链接

1)Egghead视频真棒!http://www.egghead.io/video/xoIHkM4KpHM

2)关于指令的官方Angular文档http://docs.angularjs.org/guide/directive

3)60分钟内角度的良好概述http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx