Question

我有一个angularJs视图页面，其中正在进行许多Web服务调用以填充页面。我在一个div中显示angular-spinner并隐藏内容，直到从Web服务获取所有数据。但是我注意到微调器开始很好但它在隐藏的div渲染到视图之前冻结（停止旋转）。如何保持旋转器旋转直到div被渲染？

   $scope.myData = 'a huge list of records from a slow WebService';

    <div class="container">
        <div ng-show="!myData" spinner>Loading....
          <span us-spinner="{radius:30, width:8, length: 16}"></span>
        </div>

       <div ng-hide="!myData" class="details">
           <div>content 1<div>
           <div>content 2<div>
           ....
           <div>content n</div>
        </div>
    </div>
</div>

Answer 1

我认为你使用ng-repeat来渲染视图，而ng-repeat是异步操作。
当ng-repeat完成工作时，你应该停止你的微调器。
ng-repeat finish event

Answer 2

从service promise

加载所有内容后，您应隐藏加载程序

  $scope.showLoader = true;

  serv.getData = function () {
    var defer = $q.defer();

    $http.get(url).success(function (data) {
      $scope.data = data;
      $scope.showLoader = false;
    })

    return defer.promise;

  };

HTML

<div ng-show="showLoader" spinner>Loading....
   <span us-spinner="{radius:30, width:8, length: 16}"></span>
</div>

angular-spinner在页面呈现

2 个答案: