角度微調在頁面呈現前停止旋轉

Question

我有一個angularJs視圖頁面，其中正在進行許多Web服務調用來填充頁面。我在一個div中顯示角度微調並隱藏內容，直到從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-重複渲染視圖和NG-重複的異步操作。
當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>