Ionic - Memuat Javascript

Pemuatan ionik akan menonaktifkan interaksi apa pun dengan pengguna saat ditampilkan dan mengaktifkannya kembali saat diperlukan.

Menggunakan Loading

Pemuatan dipicu di dalam pengontrol. Pertama, kita perlu menyuntikkan$ionicLoadingdi pengontrol kami sebagai ketergantungan. Setelah itu, kita perlu memanggil$ionicLoading.show()metode dan pemuatan akan muncul. Untuk menonaktifkannya, ada$ionicLoading.hide() metode.

Kontroler

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

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

Kode HTML

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

Saat pengguna mengetuk tombol, pemuatan akan muncul. Anda biasanya ingin menyembunyikan pemuatan setelah beberapa fungsi yang memakan waktu selesai.

Beberapa parameter opsi lain dapat digunakan saat bekerja dengan pemuatan. Penjelasannya ditampilkan pada tabel di bawah ini.

Memuat parameter opsi

Pilihan	Tipe	Detail
templateUrl	tali	Digunakan untuk memuat template HTML sebagai indikator pemuatan.
cakupan	obyek	Digunakan untuk meneruskan cakupan khusus ke pemuatan. Default-nya adalah $ rootScope.
noBackdrop	Boolean	Digunakan untuk menyembunyikan latar belakang.
hideOnStateChange	Boolean	Digunakan untuk menyembunyikan pemuatan saat status diubah.
menunda	jumlah	Digunakan untuk menunda menampilkan indikator dalam milidetik.
durasi	jumlah	Digunakan untuk menyembunyikan indikator setelah beberapa saat dalam milidetik. Bisa digunakan sebagai penggantihide() metode.

Memuat Config

Konfigurasi ionik digunakan untuk mengonfigurasi opsi yang ingin Anda gunakan di semua file $ionicLoading layanan di seluruh aplikasi.

Ini bisa dilakukan dengan menggunakan $ionicLoadingConfig. Karena konstanta harus ditambahkan ke modul aplikasi utama, bukaapp.js file dan tambahkan konstanta Anda setelah deklarasi modul.

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

Kode di atas akan menghasilkan layar berikut -