javascript - Angular : Using ngShow and Hide to remove spinner if no data returned

Question

我有下面的 HTML，它显示一个微调器，直到显示应用程序的标签列表。但是，如果也不存在任何事件，则旋转器将继续。

我希望微调器消失，并且输入只是空白，或者向用户返回一条消息，表明此应用程序没有标签。不知道如何在保持代码整洁的同时做到这一点!

HTML:

<div ng-show="noun === 'Tag'">
  <div class="spinner" ng-hide="loadedTags()">
    <i class="fa fa-spinner fa-pulse"></i>
  </div>
  <div ng-show="loadedTags()">
    <select ol-filter-select="tags" ng-model="tagName">
      <option ng-value="name" ng-repeat="name in tagNames()" ng-bind="name"   ng-selected="tagName === name">
      </option>
    </select>
  </div>
</div>

Controller :

$scope.loadedTags = function() {
  return !_.isEmpty($scope.tags);
};

查看:

如果没有标签，旋转器会一直旋转...

Answer 1

我认为您需要显示更多实际加载标签的代码。您是否通过 $http.get 或类似的方式从服务器加载标签？如果是这样，那么通常完成此操作的方法是使用一个 bool 范围变量来专门表示当前正在进行加载这一事实。该变量将控制微调器是否可见。例如，我有如下所示的通用代码:

Angular Controller 的构造函数:

$scope.loadingInProgress = true;

$http.get(myUrl)
.then(function(result) { 
    // My success function
    $scope.tags = result.data; 
    $scope.loadingInProgress = false;
},
function() { 
    // My failure function
    $scope.loadingInProgress = false; 
});

HTML:

  <div class="spinner" ng-show="loadingInProgress">
    <i class="fa fa-spinner fa-pulse"></i>
  </div>

您似乎试图避免使用额外的作用域变量来表示加载状态，因此您试图根据加载结果来计算加载状态。但这并不真正可靠。加载的结果可以是任何内容，并且并不真正指示加载是否正在进行。