角度微调在页面呈现前停止旋转

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>