javascript - AngularJS - 如何在数组长度为零时显示警报并隐藏默认行为？

Question

我正在使用 angular，我正在显示一个加载内容后消失的小加载圆圈。那个圆圈只是我在第一次加载页面时从我的 html 调用的 CSS 类，我是这样做的:

实际上圆圈必须有类:圆圈内的.circle 和.loader ...

<div ng-hide="lineItems.length" class="circle">
 <div class="loader"></div>
</div>

正如您在下面看到的，有一个带有 if 的 promise ，表示如果 linesItems.length 为零，则显示 myModal。一切正常，但加载圆圈仍然出现，我需要做的是完全删除 .circle 和 .loader 一旦 if 已达到。

.then(function(lines) {
  $scope.lineItems = lines;
  if ($scope.lineItems.length === 0) {
   myModal.show();
   console.log('I AMN EMPTY');
  }else {
   loaderAlert.hide();
  }
 }

有人说我必须使用 $scope 变量，但我不知道该怎么做，我是 Angular 的新手，还有其他方法吗？

Answer 1

当你开始你的 promise 时，设置一个标志来说明你当前正在加载。然后当加载完成时，将标志设置为 false。将其与 ng-class 或 ng-if 一起使用，使圆的外观有条件。

function doStuff(){
    $scope.loadingIsHappening = true;
    myService.getStuff().then(function(){

       // your processing here

    }).finally(function(){
        $scope.loadingIsHappening = false;
    });
}

HTML:

 <!-- ng-if removes from DOM, while ng-hide modifies CSS display to none-->
<div ng-if="loadingIsHappening == true" class="circle">
    <div class="loader"></div>
</div>