Ionic - Javascript modal

Lorsque Ionic modal est activé, le volet de contenu apparaîtra au-dessus du contenu normal. Modal est fondamentalement un popup plus grand avec plus de fonctionnalités. Modal couvrira tout l'écran par défaut, mais il peut être optimisé comme vous le souhaitez.

Utilisation de Modal

Il existe deux façons d'implémenter modal dans Ionic. Une façon consiste à ajouter un modèle séparé et l'autre consiste à l'ajouter au-dessus du fichier HTML normal, à l'intérieur duscriptMots clés. La première chose que nous devons faire est de connecter notre modal à notre contrôleur en utilisant l'injection de dépendance angulaire. Ensuite, nous devons créer un modal. Nous passerons dans la portée et ajouterons de l'animation à notre modal.

Après cela, nous allons créer des fonctions pour ouvrir, fermer, détruire modal. Les deux dernières fonctions sont placées là où nous pouvons écrire le code qui sera déclenché si un modal est masqué ou supprimé. Si vous ne souhaitez déclencher aucune fonctionnalité, lorsque le modal est supprimé ou masqué, vous pouvez supprimer les deux dernières fonctions.

Code du contrôleur

.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
   });
});

Code 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>

La façon dont nous l'avons montré dans le dernier exemple est lorsque le script La balise est utilisée comme conteneur de notre modal dans un fichier HTML existant.

La deuxième méthode consiste à créer un nouveau fichier de modèle dans le templatesdossier. Nous utiliserons le même code que dans notre dernier exemple, mais nous supprimerons lescript balises et nous devons également changer fromTemplateUrl dans le contrôleur pour connecter modal avec le nouveau modèle créé.

Code du contrôleur

.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
   });
});

Code 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>

La troisième façon d'utiliser Ionic modal est d'insérer du HTML en ligne. Nous utiliserons lefromTemplate fonction au lieu de la fromTemplateUrl.

Code du contrôleur

.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
   });
});

Les trois exemples auront le même effet. Nous allons créer un bouton pour déclencher le$ionicModal.show() pour ouvrir modal.

Code HTML

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

Lorsque nous ouvrirons modal, il contiendra un bouton qui sera utilisé pour le fermer. Nous avons créé ce bouton dans un modèle HTML.

Il existe également d'autres options d'optimisation modale. Nous avons déjà montré comment utiliserscope et animation. Le tableau suivant montre d'autres options.

Option	Type	Détail
focusFirstInput	booléen	Il mettra automatiquement au point la première entrée du modal.
toile de fondCliquez pour fermer	booléen	Cela permettra de fermer le modal lorsque Backdrop est tapé. La valeur par défaut est true.
matérielBackButtonClose	booléen	Cela permettra de fermer le modal lorsque le bouton de retour matériel est cliqué. La valeur par défaut est true.