Uso de Popover

Alexander A. Ramírez M.

Hay otro artefacto que permite presentar información emergente aparte de los Popups y estos son los Poppover. Son ventanas emergentes que se activan cuando se interactuan con algún elemento en la pantalla. Principalmente se utilizan para resentar información complementaria, aunque realmente pueden servir para obtener datos u otra función similar a los Popup.

La idea de este tutorial es presentar de forma sencilla su uso.

Ingrese a play.ionic.io e inicie un proyecto desde cero.

El objetivo es:

  • Crear una aplicación con varios botones que activan el Popover mediante la directiva ng-click.
  • Crear el Popover en el controlador utilizando el servicio $ionicPopover y manejar sus eventos.

Vamos a iniciar con el contenido de la pantalla principal y agreguemos tres botones que activen el Popover.

<body ng-app="app" ng-controller="contentController">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Popover</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <button ng-click="abrirPopover($event)" 
      class="button button-block button-assertive">Abrir Popover</button>
    <button ng-click="abrirPopover($event)" 
      class="button button-block">Abrir Popover</button>
    <button ng-click="abrirPopover($event)" 
      class="button button-block button-positive">Abrir Popover</button>
  </ion-content>
</ion-pane>
</body>

Ahora vamos a definir la plantilla del $ionicPopover. Fíjese que debe utilizar la directiva ion-popover-view.

De resto es como definir una vista normal en ionic.

<script id="popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-header-bar>
      <h3 class="title">Título</h3>
      <button ng-click="cerrarPopover()" 
        class="button button-icon"><i class="icon ion-close"></i></button>
    </ion-header-bar>
    <ion-content class="padding">
      Mensaje informativo para el usuario.
      <button ng-click="cerrarPopover()" 
        class="button button-block button-assertive">Cerrar</button>
    </ion-content>
  </ion-popover-view>
</script>

Primero vamos a crear el Popover inyectando el servicio $ionicPopover. Es muy similar al uso de Poppups.

$ionicPopover.fromTemplateUrl('popover.html', {
  scope: $scope
}).then(function(p) {
  $scope.popover = p;
});

No olvide inyectar el servicio en el controlador.

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

Ahora vamos a trabajar el controlador. Hay que definir las funciones abrirPopover y cerrarPopover.

$scope.abrirPopover = function($event) {
  $scope.popover.show($event);
};
$scope.cerrarPopover = function() {
  $scope.popover.hide();
};

También se pueden manejar los eventos que se generan en el ciclo de vida del $ionicPopover.

//Limpiar el popover cuando ya no lo necesitemos
$scope.$on('$destroy', function() {
  $scope.popover.remove();
});
//Ejecutar alguna acción cuando se oculta el popover
$scope.$on('popover.hidden', function() {
  // Ejecutar acción
});
//Ejecutar una acción cuando se borra
$scope.$on('popover.removed', function() {
  // Ejecutar acción
});

Pueden ver el resultado si lo desea.