AngularJS Spinner nicht angezeigt, möglicherweise aufgrund http.get zu schnell feuern

Question

Entschuldigung, wenn dies mit anderen Post dupliziert wird, aber meine Reputationspunkte sind zu niedrig, um sie zu kommentieren. Ich habe das folgende, um einen Spinner zu zeigen, während ich einen http get fire.

HTML:

<button class="btn btn-primary" ng-click="loadRemedyData(showsitegroup.groupSelect)" 
    style="font-size:12px"> 
View UnScheduled WO's 
<i ng-show="loading" class="fa fa-refresh fa-spin" ></i></button> 

Controller:

$scope.loading = false; 

$scope.loadRemedyData = function(qName) { 
    //Injects scope from Remedy Database JSON 
    $scope.loading = true; 
    $http.get("/openremedywos?qName=" + qName) 
     .then(function (response) {$scope.newdevices = response.data;}); 
    $scope.loading = false; 
    } 

Wenn ich die letzte Zeile aus kommentieren, die das Laden Flagge zurück auf false ändert, die Spinner-Shows und läuft weiter, Show beweist, dass seine Initialisierung .

Frage ist, mit dem oben genannten, nehme ich an, dass es nicht zeigt, wie es sich auf die letzte Flag-Änderung zu schnell bewegt, obwohl es bis zu 20-30 Sekunden dauern kann, bis der Bereich angezeigt wird.

Ich schätze, dass 20-30 Sekunden nicht viel ist, aber ich möchte, dass es den Spinner zeigt, um ungeduldige Benutzer daran zu hindern zu denken, dass es nicht funktioniert, indem es den laufenden Spinner zeigt.

Answer 1

Dies liegt daran, dass Sie nicht auf die HTTP-Rückgabe warten, bevor Sie die $scope.loading zu false zuweisen.

Try this:

$scope.loadRemedyData = function(qName) { 
//Injects scope from Remedy Database JSON 
$scope.loading = true; 
$http.get("/openremedywos?qName=" + qName).then(function (response){ 
    $scope.newdevices = response.data; 
    $scope.loading = false; // brought it inside. Where it will wait for the http to get response. 
}); 
}