javascript - angular-loading-overlay 不显示任何内容

Question

我有一个 AngularJS 前端应用程序，我在其中使用 angular-loading-overlay 库。问题是它没有显示我的微调器。

我有一个带有指定 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>

Controller 本身:

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'});
        });

    };