AngularJS:显示加载 HTML 直到加载数据 [英] AngularJS: show loading HTML until data is loaded

问题描述

如何让 AngularJS 在数据加载完成之前显示加载微调器?

How do I have AngularJS show a loading spinner until the data has finished loading?

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

If my controller has $scope.items = [{name: "One"}] set up statically, and an AJAX loader which populates $scope.items[0]['lateLoader'] = "Hello", I'd like the spinner to show until the AJAX load is complete, and then populate the bound span with the retrieved data.

<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 为空，因此微调器将被替换为空.

This code populates the bound span immediately, and as item.lateLoader is empty the spinner is replaced with nothing.

我应该如何干净利落地做到这一点?

How should I do this cleanly?

推荐答案

我会按照其他答案创建一个自定义指令，但这里是您如何在没有指令的情况下执行此操作，这可能是在获取之前学习的好主意进入更复杂的功能......需要注意的几件事:

I would create a custom directive as per the other answer, but here is how you could do it without the directive which might be a good idea to learn before getting into more complex functionality.. A couple things to note:

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

这篇关于AngularJS:显示加载 HTML 直到加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！