Popups en Ionic

Alexander A. Ramírez M.

En ionic ofrece el manejo de ventanas de diálogo emergentes (Popups) que requieren de que el usuario interactue y responda para continuar.

ionic ofrece esta facilidad a través del servicio $ionicPopup y los tipos de ventanas de diálogo son: alert(), prompt(), confirm() y custom.

Vamos a trabajar cada tipo para dejar claro la forma de usarlas.

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

El objetivo es:

  • Inyectar el servicio $ionicPopup en el controlador.
  • Implementar la rutina que muestra la alerta, utilizando sus parámetros usando $ionicPopup.alert y crear una variable para la promesa que devuelve.
  • Análogamente haga el uso de prompt y confirm. Verifique la documentación y agregue los atributos al objeto que reciben los métodos prompt y confirm.

Primero en JS inyecta el servicio $ionicPopup en el controlador.

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

Ahora vamos a definir la rutina showAlert que va a manejar la alerta en el modelo. Revise los parámetros que recibe $ionicPopup.alert.

$scope.showAlert = function() {
  var alertPopupPromise = $ionicPopup.alert({
    title: 'Alerta de Seguridad',
    subTitle: 'Su sesión ha expirado',
    template: 'Vuelva a Ingresar!',
    okText: 'Cerrar',
    okType: 'button-assertive'
  });
  // $ionicPopup.alert() devuelve una promesa que se resuelve 
  // cuando se cierra la alerta
  alertPopupPromise.then(function(res) {
    alert('Cerrada la alerta');
  });
};

Fíjese que $ionicPopup.alert devuelve una promesa y esta se resuelve cuando se cierra la alerta. Es opcional que el desarrollador use la promesa devuelta.

Ahora en HTML indique en el primer botón el nombre de la rutina que va a generar la alerta utilizando la directiva de Angular ng-click.

<button ng-click="showAlert()" class="button button-block button-assertive">Alert</button>

Ahora si puede presionar el primer botón y ver el resultado de la alerta.

Aprovechando que estamos en el HTML vamos a agregar al segundo botón la directiva ng-click y especifiquemos la rutina que va a manejar el evento con el nombre showConfirm.

Y por su parte en el JS definamos en el modelo showConfirm.

$scope.showConfirm = function() {
  var confirmPopupPromise = $ionicPopup.confirm({});
};

De la misma manera verifique la documentación y los parámetros que puede usar para el título, subtítulo, contenido y los botones de ok y cancel.

$scope.showConfirm = function() {
  var confirmPopupPromise = $ionicPopup.confirm({
    title: 'Transferencias y Pagos',
    subTitle: 'Confirme la operación',
    template: '¿Está seguro que desea realizar la operación?',
    cancelText: 'No',
    cancelType: 'button-light',
    okText: 'Si',
    okType: 'button-balanced'
  });
  
  confirmPopupPromise.then(function(res) {
    alert('Cerrada la confirmación');
  });
};

Si se fija bien es la misma estructura del Alert. Sin embargo, la promesa cuando se resuelve nos proporciona información sobre la selección del usuario en una variable. Ud. puede tomar esa variable y ejecutar distintas acciones que se basen en la respuesta del usuario de la forma siguiente.

confirmPopupPromise.then(function(res) {
  if (res)
    alert('Operación realizada!!');
  else
    alert('Operación cancelada');
});

Ahora sigamos de manera análoga con prompt().

$scope.showPrompt = function() {
  var promptPopupPromise = $ionicPopup.prompt({
    title: 'Chequeo de Seguridad',
    subTitle: 'Introduzca sus credenciales',
    template: 'Introduzca su clave de operaciones especiales',
    inputType: 'password',
    inputPlaceholder: 'Clave',
    cancelText: 'Cancelar',
    cancelType: 'button-light',
    okText: 'Continuar',
    okType: 'button-calm'
  });

  promptPopupPromise.then(function(res) {
    alert('Su clave es '+ res);
    console.log(res);
  });
};

Si desea, puede ver el resultado.

Les dejo otro experimiento con todos los atributos que se pueden configurar en un alerta. En clase definimos un custom Popup que maneja dos campos en lugar de uno, se los dejo.