web-dev-qa-db-ja.com

anglejsを使用してロードアイコンまたはロードプログレスバーを表示する

Anglejsを使用して読み込みアイコンまたは読み込み進行状況バーを表示する方法。 jquery $("body").addClass("loading");、$("body").removeClass("loading");で使用されているこのようなものを意味します。YouTubeのロードバーのようなプログレスバーへのリンクがいくつか見られましたが、単純にしたいのです。プログレスバーまたはロード画像またはロードアイコンまたはロードバー。モジュールからモジュールへ、タブからタブへと移動するバーを示します。使い方をわかりやすく説明したリンクや機能はありますか？.

angularjsangularjs-directiveangular-uiangular-ui-bootstrap
4
Cathy

自分で実装したくない場合は、以下のリンクをご覧ください。

angular-spinner または angular-sham-spinner

これも読んでください [〜＃〜] blog [〜＃〜] スピナーがangularjsでどのように機能するかを詳しく説明しています

[〜＃〜]編集[〜＃〜]コメントに従って

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

私はコードをテストしていませんが、ディレクティブはこれよりも複雑になることはありません...

6
harishr

見る

<div ng-show="loader.loading">Loading</div>

コントローラ

$scope.loader.loading = true;  // false

これもコントローラーの上に追加します

  $scope.loader = { 

              loading : false ,

             };

ローディングバーの表示と非表示

5
Prashobh