Ionic - Javascript 載入

Ionic 載入在顯示時會停用使用者的所有互動，並在需要時再次啟用。

使用載入

載入是在控制器內部觸發的。首先，我們需要將$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 模板作為載入指示器。
scope	物件	用於將自定義作用域傳遞給載入。預設值為$rootScope。
noBackdrop	布林值	用於隱藏背景層。
hideOnStateChange	布林值	用於在狀態更改時隱藏載入。
delay	數字	用於延遲以毫秒為單位顯示指示器。
duration	數字	用於在一段時間後以毫秒為單位隱藏指示器。可以替代hide()方法。

載入配置

Ionic 配置用於配置您希望在整個應用程式中的所有$ionicLoading服務中使用的選項。

這可以透過使用$ionicLoadingConfig來完成。由於常量應該新增到主應用程式模組中，因此開啟您的app.js檔案，並在模組聲明後新增您的常量。

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

以上程式碼將生成以下螢幕：

列印頁面