javascript - 将 Angular Promise 与 ng-show 一起使用

Question

我有一个 Angular SPA，它从后端加载大量数据并将它们显示在表格中。为了提供更好的用户体验，我在加载数据时隐藏这些表并显示微调器。所以我最终编写了这样的代码:

模板:

<div class="row">
  <div class="col-md-12">
    <spinner ng-show="ctrl.loading.unicorns"></spinner>
    <ul ng-hide="ctrl.loading.unicorns">
      <li ng-repeat="unicorn in ctrl.unicorns">{{ unicorn.name }}</li>
    </ul>
  </div>
</div>

Controller :

function unicornController() {
  var ctrl = this;

  ctrl.loading = {
    unicorns: true
  };

  unicornService
    .get()
    .then(function(data) {
      ctrl.unicorns = data;
    })
    .finally(function() {
      ctrl.loading.unicorns = false;
    });

  return ctrl;
}

对于一个加载器来说这并不是什么大问题，但是当我在每个 View 中都有 3 个加载器时，感觉加载可以以更好的方式处理。我发现 Promise 有一个 $$state.status 属性，它恰好保存了这个值，但据我所知，我不应该使用它，因为它不是公共(public) API 的一部分。有没有其他方法可以在不弄乱本地标志的情况下实现此目的？

Answer 1

您可以自己找到一种方法来完成此操作，也可以找到现有的方法来完成此操作。

这是一个有用的项目，它将自动显示您的 $http 请求的进度。

Angular loading bar

安装(npm 或 Bower)

$ npm install angular-loading-bar
$ bower install angular-loading-bar

包含

angular.module('myApp', ['angular-loading-bar'])