angular-loading-overlay zeigt nichts

Question

Ich habe eine AngularJS front app, wo ich angular-loading-overlay Bibliothek verwende. Das Problem ist, dass es mir meinen Spinner nicht zeigt.

Ich habe eine Vorlage mit einem zugeordneten Controller:

<div ng-controller="FooCtrl" data-ng-init="initFoo()"> 
    <div class="bs-loading-container" bs-loading-overlay="FOO" bs-loading-overlay-template-url="/static/spinner.html"> 
      ... here some ng-repeat, data for it is loading inside initFoo(); 
    </div> 
</div> 

Die Steuerung selbst:

app.controller("FooCtrl", ['$scope', '$http', 'bsLoadingOverlayService', 
    function ($scope, $http, bsLoadingOverlayService) { 
     $scope.initFoo = function() { 
      bsLoadingOverlayService.start({referenceId: 'FOO'}); 
      $http.get("/model").then(function (response) { 
        // some long-loading data 
      }); 
      bsLoadingOverlayService.stop({referenceId: 'FOO'}); 
     }; 
}]); 

CSS-Fragment:

.bs-loading-container { 
    position: relative; 
} 

spinner.html sich einige div mit Text nach innen ist (Ich habe es zu Testzwecken vereinfacht):

<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.7);"> 
    <h1>Please, wait...</h1> 
</div> 

Es gibt keine Fehler in der Konsole. Die Methode initFoo() funktioniert gut, es lädt Daten und die Daten werden in der Seite gezeichnet, nachdem es ordnungsgemäß geladen wurde. Während des Ladens erscheint jedoch kein Spinner.

Darüber hinaus, wenn ich absichtlich bs-loading-overlay-template-url zu falschen Pfad ändern, dann erhalte ich Fehler in der Konsole. Das heißt, ich denke, dass die Bibliothek angular-loading-overlay selbst gut geladen wurde.

Ich weiß, dass es immer sehr spezifisch ist, aber vielleicht sind irgendwelche Ideen was ich vermissen könnte und was soll ich überprüfen?

Answer 1

Ihr Problem ist, dass Sie das Overlay angezeigt werden, und es sofort

$ http.get ist ein asynchroner versteckt. Sie sollten also das Overlay in den Handler-Methoden verstecken. Versuchen Sie dies:

$scope.initFoo = function() { 
     bsLoadingOverlayService.start({referenceId: 'FOO'}); 
     $http.get("/model").then(function (response) { 
       // some long-loading data 
       bsLoadingOverlayService.stop({referenceId: 'FOO'}); 
     }); 

    };