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>

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

イオンローディングショー

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

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

Options	Type	Details
templateUrl	string	Used to load HTML template as loading indicator.
scope	object	Used to pass custom scope to loading. Default is the $rootScope.
noBackdrop	Boolean	Used to hide the backdrop.
hideOnStateChange	Boolean	Used to hide the loading when state is changed.
delay	number	Used to delay showing the indicator in milliseconds.
duration	number	Used to hide the indicator after some time in milliseconds. Can be used instead of hide() method.

設定の読み込み

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

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

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

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

イオン負荷定数

Ionic-js-loading

目次