ページがレンダリングされる前に角スピナーが回転を停止する

Question

私は、ページを生成するために多くのWebサービス呼び出しが行われているangularJsビューページを持っています。私は1つの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-repeatが非同期操作でレンダリングするためにNG-繰り返し使用することを想定。
ng-repeatがジョブを終了するときに、スピナーを停止する必要があります。
ng-repeat finish event

Answer 2

すべてが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>