角度加载覆盖不显示任何内容答案

【问题标题】：angular-loading-overlay doesn't show anything角度加载覆盖不显示任何内容
【发布时间】：2017-06-20 19:19:28
【问题描述】：

我有一个 AngularJS 前端应用程序，我在其中使用 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 本身加载得很好。

我知道它总是非常具体，但可能有什么想法我会错过什么以及我应该检查什么？

【问题讨论】：

标签： javascript css angularjs overlay

【解决方案1】：

您的问题是您正在显示叠加层并立即隐藏它

$http.get 是异步的。所以你应该在处理程序方法中隐藏覆盖。试试这个：

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

    };

【讨论】：