角加載覆蓋不顯示任何東西

Question

我有一個AngularJS frontent應用程序，我在那裏使用angular-loading-overlay庫。問題是它沒有顯示我的微調。

我有一個分配的控制器模板：

<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> 

控制器本身：

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片段：

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

spinner.html本身就是一些DIV與文本內（爲了測試目的，我簡化了它）：

<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> 

控制檯中沒有錯誤。方法initFoo()工作正常，它會加載數據，並且數據在加載正常後在頁面中繪製。但是在裝載期間，不會出現微調。

此外，如果我故意將bs-loading-overlay-template-url更改爲不正確的路徑，則會在控制檯中收到錯誤。這意味着，我猜，圖書館angular-loading-overlay本身裝載得很好。

我知道它總是非常具體，但可能是任何想法我可能會錯過什麼，我應該檢查什麼？

Answer 1

你的問題是，你是顯示覆蓋，瞬間隱藏它

$ http.get是異步的。所以你應該隱藏處理程序方法中的覆蓋。試試這個：

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

    };