Ionic - Modale Javascript

Quando il modale ionico è attivato, il riquadro del contenuto verrà visualizzato sopra il contenuto normale. Modal è fondamentalmente un popup più grande con più funzionalità. Modal coprirà l'intero schermo per impostazione predefinita, ma può essere ottimizzato nel modo desiderato.

Utilizzo di Modal

Esistono due modi per implementare modal in Ionic. Un modo è aggiungere un modello separato e l'altro è aggiungerlo sopra il normale file HTML, all'interno del filescripttag. La prima cosa che dobbiamo fare è connettere il nostro modale al nostro controller usando l'iniezione di dipendenza angolare. Quindi dobbiamo creare un modale. Passeremo l'ambito e aggiungeremo l'animazione al nostro modale.

Successivamente, creeremo funzioni per l'apertura, la chiusura, la distruzione del modale. Le ultime due funzioni sono posizionate dove possiamo scrivere il codice che verrà attivato se un modale viene nascosto o rimosso. Se non si desidera attivare alcuna funzionalità, quando il modale viene rimosso o nascosto, è possibile eliminare le ultime due funzioni.

Codice controller

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

Codice HTML

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
		
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

Il modo in cui abbiamo mostrato nell'ultimo esempio è quando il file script tag viene utilizzato come contenitore del nostro modale all'interno di un file HTML esistente.

Il secondo modo è creare un nuovo file modello all'interno di templatescartella. Useremo lo stesso codice del nostro ultimo esempio, ma rimuoveremo il filescript tag e dobbiamo anche cambiare fromTemplateUrl nel controller per connettere modale con il nuovo modello creato.

Codice controller

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.html', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

Codice HTML

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
	
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

Il terzo modo di utilizzare il modal ionico è inserire HTML inline. Useremo il filefromTemplate funzione invece della fromTemplateUrl.

Codice controller

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
		
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
		
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

Tutti e tre gli esempi avranno lo stesso effetto. Creeremo un pulsante per attivare il file$ionicModal.show() per aprire modal.

Codice HTML

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

Quando apriamo modal, conterrà un pulsante che verrà utilizzato per chiuderlo. Abbiamo creato questo pulsante in un modello HTML.

Ci sono anche altre opzioni per l'ottimizzazione modale. Abbiamo già mostrato come usarescope e animation. La tabella seguente mostra altre opzioni.

Opzione	genere	Dettaglio
focusFirstInput	booleano	Metterà a fuoco automaticamente il primo input del modale.
sfondoClickToClose	booleano	Abilita la chiusura del modale quando si tocca lo sfondo. Il valore predefinito è vero.
hardwareBackButtonClose	booleano	Abiliterà la chiusura del modale quando si fa clic sul pulsante indietro dell'hardware. Il valore predefinito è vero.