Diálogos Modales (Modals)

Los diálogos modales son ventanas emergentes, temporales, que demandan la atención del usuario que interactua con la aplicación, normalmente para que tome una decisión o proporcione información.

En ionic este comportamiento se logra con el servicio $ionicModal. Es muy sencillo de usar.

Ingrese a play.ionic.io para obtener el código para iniciar el tutorial y haga FORK. No olvide hacer FORK.

El objetivo es:

• Indicar cual es la acción que inicia el modal. En nuestro caso usando ng-click en el botón de la pantalla inicial e indicar la rutina que se ejecuta para abrir el modal
• Crear la plantilla de angular con el contenido de la pantalla modal utilizando la directiva ion-modal-view en lugar de ion-view
• Se inyecta el servicio $ionicModal en el controlador
• Se implementa el uso del servicio $ionicModal con sus diferentes opciones

En el botón de la pantalla principal agregue la directiva ng-click e indique la rutina que va a manejar el evento.

<button ng-click="abrirModal()" 
    class="button button-block button-assertive">Abrir el Modal
</button>

Ahora vamos a crear la plantilla de angular debajo del tag ion-content utilizando el tag script de la manera siguiente. Recuerde el uso del tag ion-modal-view en lugar de ion-view.

<script id="modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <div class="buttons">
        <h1 class="title">Título Modal</h1>
        <button class="button button-icon ion-close-circled" ng-click="cerrarModal()">
        </button>
      </div>
    </ion-header-bar>
    <ion-content class="padding">
      <h3>Seleccione entre las opciones</h3>
      <ion-list>
        <ion-radio class="onlytopborder">
          Opción 1
        </ion-radio>
        <ion-radio class="onlytopborder">
          Opción 2
        </ion-radio>
        <ion-radio class="onlytopborder">
          Opción 3
        </ion-radio>
      </ion-list>
      <button class="button button-block button-dark">Continuar...</button>
    </ion-content>
  </ion-modal-view>
</script>

Coloque en CSS la definición de la clase onlytopborder.

.onlytopborder {
  border-top: 1px dotted #cccccc;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

Ahora en el controlador (JS) inyecte el servicio $ionicModal.

.controller('contentController', function($scope, $ionicModal) {

Luego vamos a definir la ventana modal mediante el método fromTemplateUrl del servicio $ionicModal de la manera siguiente:

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) { 
  $scope.modal = modal; 
});

Fíjese que se define cual es la plantilla de Angular que va a proporcionar el Layout de la pantalla y se especifican los parámetros de acuerdo a la documentación.

Ahora definamos nuestra rutina abrirModal.

$scope.abrirModal = function() {
  $scope.modal.show();
};

Si se fija ya el diálogo funciona, pero no lo puede cerrar. Explore y defina la rutina que hace falta para cerrar la ventana Modal.

$scope.cerrarModal = function() {
  $scope.modal.hide();
};

Por último, vamos a manejar los eventos que el servicio $ionicModal

Su controlador debe quedar de la manera siguiente:

.controller('contentController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
  }).then(function(modal){
    $scope.modal = modal; 
  });

  $scope.abrirModal = function() {
    $scope.modal.show();
  };

  $scope.cerrarModal = function() {
    $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
    alert("Modal destroy");
  });

  $scope.$on('modal.hidden', function() {
    alert("Modal hidden");
  });

  $scope.$on('modal.removed', function() {
    alert("Modal removed");
  });
});

Si desea, puede ver el resultado. Les dejo un ejemplo de las parte de la pantalla y su manejo con Header, Sub Header, Content, Sub Footer y Footer.

Hicimos un ejemplo con una nueva animación. Por otra parte una idea para extender la sesión utilizando un timer con un modal.