ページの上部ではなく特定の「div」内に角度ローディングバーを表示するにはどうすればよいですか？

最近、angle-loading-bar.jsを使用して、httpコールの進行状況を画面に表示し始めました。デフォルトでは、青色のプログレスバーが画面の上部に表示されますが、画面の上部に表示されるのではなく、特定のdiv内に表示されます。プログレスバーが画面の上部に表示されますこれを行うには、私が持っている、しかしページの上部ではなく特定の「div」内に角度ローディングバーを表示するにはどうすればよいですか？

angular.module('app', ['angular-loading-bar']);

、あなただけのコードの下の行を追加する必要がプログレスバーをアクティブにするためにthis answerに示すように、 divと私はその特定のdiv内に表示されるプログレスバーを望みます。私はコアangular-loadingbar.jsを開いたとき、私はあなたが親セレクタがbodyで見ることができるように、私はこれを変更することができ、それを通して方法がある

this.parentSelector = 'body'; 
this.spinnerTemplate = '<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>'; 
this.loadingBarTemplate = '<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>';

、彼らは以下の行を使用してプログレスバーを挿入していることがわかりました読み込みバーを呼び出すページのparentSelector？

ご協力いただきありがとうございます。

出典

2016-04-01 Saumil Soni

ポジションテンプレート：

をあなたがに注入テンプレートをたい要素にCSSセレクタを提供し、loadingBarやスピナーを配置したい場合。デフォルトは<body>要素である：Github

出典

2016-04-01 19:13:25 shammelburg

上角度ローディングバードキュメントから撮影

angular.module('myApp', ['angular-loading-bar']) .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { cfpLoadingBarProvider.parentSelector = '#loading-bar-container'; cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>'; }]) <div id="loading-bar-container"></div>

私はこれを試してみましたが、parentSelectorを変更する場合、バーは、ウィンドウの上部に残っています。カスタムローディングテキストが追加される場所は変更されますが、バー自体は変更されません。 – Paulos3000

@ Paulos3000古いですが、おそらく他の人には役立ちます。 cssを編集して、 '＃loading-bar .bar {top：50％;}'を含めて、あなたのcssスクリプトの順序が上書きされていないことを確認してください – user153882

私は画面上に単純なローダーを達成するために外部ライブラリを使用しません。最も簡単な解決策は、DOMノードを好きな場所に作成し、$rootScopeの特定のフラグがtrueである場合にのみ表示することです。 E：

出典

2016-04-01 19:11:52 IProblemFactory

ページの上部ではなく特定の「div」内に角度ローディングバーを表示するにはどうすればよいですか？

答えて

関連する問題