Ionic-Javascriptの読み込み

イオンローディングは、表示されたときにユーザーとの対話を無効にし、必要に応じて再度有効にします。

読み込みの使用

読み込みはコントローラー内でトリガーされます。まず、注入する必要があります$ionicLoading依存関係としてコントローラーで。その後、電話する必要があります$ionicLoading.show()メソッドとロードが表示されます。それを無効にするために、$ionicLoading.hide() 方法。

コントローラ

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

HTMLコード

<button class = "button button-block" ng-click = "showLoading()"></button>

ユーザーがボタンをタップすると、読み込みが表示されます。通常、時間のかかる機能が終了した後は、読み込みを非表示にする必要があります。

ロードを操作するときは、他のいくつかのオプションパラメータを使用できます。説明を下表に示します。

オプションパラメータの読み込み

オプション	タイプ	詳細
templateUrl	ストリング	読み込みインジケーターとしてHTMLテンプレートを読み込むために使用されます。
範囲	オブジェクト	カスタムスコープをロードに渡すために使用されます。デフォルトは$ rootScopeです。
noBackdrop	ブール値	背景を非表示にするために使用されます。
hideOnStateChange	ブール値	状態が変更されたときにロードを非表示にするために使用されます。
ディレイ	数	インジケーターの表示をミリ秒単位で遅らせるために使用されます。
デュレーション	数	ミリ秒単位でしばらくするとインジケーターを非表示にするために使用されます。代わりに使用できますhide() 方法。

構成の読み込み

Ionic configは、すべてので使用するオプションを構成するために使用されます。 $ionicLoading アプリ全体のサービス。

これは、を使用して行うことができます $ionicLoadingConfig。定数をメインアプリモジュールに追加する必要があるため、app.js ファイルを作成し、モジュール宣言の後に定数を追加します。

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

上記のコードは次の画面を生成します-