Diálogos Modales (Modals)

Alexander A. Ramírez M.

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.