角度ローディングオーバーレイに何も表示されない

Question

私はangular-loading-overlayライブラリを使用しているAngularJSフロントエンドアプリを持っています。問題はそれが私のスピナーを私に見せないことです。

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

    };