angular-spinner hört auf, sich zu drehen, bevor die Seite gerendert wird

Question

Ich habe eine angularJs-Ansichtsseite, auf der viele Web-Service-Aufrufe getätigt werden, um die Seite zu füllen. Ich zeige den Angular-Spinner in einem Div und verberge den Inhalt, bis alle meine Daten von einem Web-Service abgerufen wurden. Wie auch immer, ich habe bemerkt, dass der Spinner gut startet, aber er bleibt hängen (hört auf sich zu drehen), bevor das versteckte div in eine Ansicht gerendert wird. Wie kann ich den Spinner drehen, bis das div gerendert wird?

$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

Ich nehme an, dass Sie ng-repeat verwenden Ansicht und ng-repeat ist async Betrieb zu machen.
Sie sollten Ihren Spinner stoppen, wenn ng-repeat den Job beendet.
ng-repeat finish event

Answer 2

Sie sollten den Lader verstecken, wenn alles aus dem service mit einem 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 geladen wird

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