Question

我有一个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本身已经很好地加载了。

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

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

    };

角度加载叠加不显示任何内容

1 个答案: