Ionic - Caricamento Javascript

Il caricamento ionico disabiliterà qualsiasi interazione con gli utenti quando viene mostrato e lo abiliterà di nuovo quando necessario.

Utilizzo del caricamento

Il caricamento viene attivato all'interno del controller. Innanzitutto, dobbiamo iniettare$ionicLoadingnel nostro controller come dipendenza. Dopodiché, dobbiamo chiamare il file$ionicLoading.show()appariranno il metodo e il caricamento. Per disabilitarlo, c'è un file$ionicLoading.hide() metodo.

Controller

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

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

Codice HTML

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

Quando un utente tocca il pulsante, verrà visualizzato il caricamento. Di solito si desidera nascondere il caricamento dopo che alcune funzionalità che richiedono tempo sono terminate.

Alcuni altri parametri di opzione possono essere utilizzati quando si lavora con il caricamento. La spiegazione è mostrata nella tabella seguente.

Caricamento dei parametri delle opzioni

Opzioni	genere	Dettagli
templateUrl	corda	Utilizzato per caricare il modello HTML come indicatore di caricamento.
scopo	oggetto	Utilizzato per passare l'ambito personalizzato al caricamento. L'impostazione predefinita è $ rootScope.
noBackdrop	Booleano	Usato per nascondere lo sfondo.
hideOnStateChange	Booleano	Utilizzato per nascondere il caricamento quando lo stato viene modificato.
ritardo	numero	Utilizzato per ritardare la visualizzazione dell'indicatore in millisecondi.
durata	numero	Utilizzato per nascondere l'indicatore dopo un po 'di tempo in millisecondi. Può essere usato al posto dihide() metodo.

Caricamento configurazione

Ionic config viene utilizzato per configurare le opzioni che si desidera utilizzare in tutti i file $ionicLoading servizi in tutta l'app.

Questo può essere fatto usando $ionicLoadingConfig. Poiché le costanti dovrebbero essere aggiunte al modulo principale dell'app, apri il tuoapp.js file e aggiungi la tua costante dopo la dichiarazione del modulo.

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

Il codice precedente produrrà la seguente schermata: