Ionic - Javascript Yükleniyor

İyonik yükleme, gösterildiğinde kullanıcılarla herhangi bir etkileşimi devre dışı bırakır ve gerektiğinde yeniden etkinleştirir.

Yüklemeyi Kullanma

Yükleme, kontrolörün içinde tetiklenir. İlk önce enjekte etmemiz gerekiyor$ionicLoadingkontrolörümüzde bağımlılık olarak. Ondan sonra aramamız gerekiyor$ionicLoading.show()yöntem ve yükleme görünecektir. Devre dışı bırakmak için bir$ionicLoading.hide() yöntem.

Kontrolör

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

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

HTML Kodu

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

Bir kullanıcı düğmeye dokunduğunda, yükleme görünecektir. Bazı zaman alıcı işlevler bittikten sonra genellikle yüklemeyi gizlemek isteyeceksiniz.

Yükleme ile çalışırken diğer bazı seçenek parametreleri kullanılabilir. Açıklama aşağıdaki tabloda gösterilmektedir.

Seçenek parametreleri yükleniyor

Seçenekler	Tür	Detaylar
templateUrl	dizi	HTML şablonunu yükleme göstergesi olarak yüklemek için kullanılır.
dürbün	nesne	Özel kapsamı yüklemeye geçirmek için kullanılır. Varsayılan $ rootScope'tur.
hayır	Boole	Arka planı gizlemek için kullanılır.
hideOnStateChange	Boole	Durum değiştiğinde yüklemeyi gizlemek için kullanılır.
gecikme	numara	Göstergenin milisaniye cinsinden gösterilmesini geciktirmek için kullanılır.
süresi	numara	Göstergeyi bir süre sonra milisaniye cinsinden gizlemek için kullanılır. Yerine kullanılabilirhide() yöntem.

Yapılandırma yükleniyor

İyonik yapılandırma, tüm uygulamalarda kullanmak istediğiniz seçenekleri yapılandırmak için kullanılır. $ionicLoading uygulama genelinde hizmetler.

Bu, kullanılarak yapılabilir $ionicLoadingConfig. Sabitlerin ana uygulama modülüne eklenmesi gerektiğinden,app.js dosyalayın ve modül bildiriminden sonra sabitinizi ekleyin.

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

Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -