Question

我正在处理角度，我正在显示一个小的加载圈，一旦加载内容就会消失。那个圈子只是一个我从html调用的CSS类，只是第一次加载页面，我这样做：

实际上，圈子必须在圈子中加上.circle和.loader

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

正如您在下面看到的那样，if有一个承诺，即如果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

当您开始承诺时，请设置一个标志，指出您当前正在加载的状态。然后在加载完成时，将标志设置为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>

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

1 个答案: