Ionic - Javascript modal

Quando o modal Ionic é ativado, o painel de conteúdo aparecerá na parte superior do conteúdo regular. Modal é basicamente um pop-up maior com mais funcionalidades. O modal irá cobrir a tela inteira por padrão, mas pode ser otimizado da maneira que você quiser.

Usando Modal

Existem duas maneiras de implementar modal no Ionic. Uma maneira é adicionar um modelo separado e a outra é adicioná-lo no topo do arquivo HTML normal, dentro doscriptTag. A primeira coisa que precisamos fazer é conectar nosso modal ao nosso controlador usando injeção de dependência angular. Então precisamos criar um modal. Vamos passar o escopo e adicionar animação ao nosso modal.

Depois disso, iremos criar funções para abrir, fechar, destruir modal. As duas últimas funções são colocadas onde podemos escrever o código que será disparado se um modal for ocultado ou removido. Se você não quiser acionar nenhuma funcionalidade, quando o modal for removido ou ocultado, você pode excluir as duas últimas funções.

Código do Controlador

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

Código 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>

A forma como mostramos no último exemplo é quando o script tag é usada como um contêiner para nosso modal dentro de algum arquivo HTML existente.

A segunda maneira é criar um novo arquivo de modelo dentro do templatespasta. Usaremos o mesmo código do nosso último exemplo, mas removeremos oscript tags e também precisamos mudar fromTemplateUrl no controlador para conectar modal com o novo modelo criado.

Código do Controlador

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

Código 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>

A terceira maneira de usar o modal Ionic é inserindo HTML embutido. Vamos usar ofromTemplate função em vez do fromTemplateUrl.

Código do Controlador

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

Todos os três exemplos terão o mesmo efeito. Vamos criar um botão para acionar o$ionicModal.show() para abrir modal.

Código HTML

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

Ao abrirmos o modal, ele conterá um botão que será usado para fechá-lo. Criamos este botão em um modelo HTML.

Existem também outras opções para otimização modal. Já mostramos como usarscope e animation. A tabela a seguir mostra outras opções.

Opção	Tipo	Detalhe
focusFirstInput	boleano	Ele focalizará automaticamente a primeira entrada do modal.
pano de fundoClickToClose	boleano	Isso permitirá o fechamento do modal quando o pano de fundo for tocado. O valor padrão é verdadeiro.
hardwareBackButtonClose	boleano	Isso permitirá o fechamento do modal quando o botão Voltar do hardware for clicado. O valor padrão é verdadeiro.