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 -