Ionic - Javascript Popover

Esta é uma visualização que aparecerá acima da visualização normal.

Usando Popover

Um Popover pode ser criado usando ion-popover-viewelemento. Este elemento deve ser adicionado ao modelo HTML e ao$ionicPopover o serviço precisa ser injetado no controlador.

Existem três maneiras de adicionar popover. O primeiro é ofromTemplatemétodo, que permite usar o modelo embutido. A segunda e a terceira maneira de adicionar popover é usar ofromTemplateUrl método.

Vamos entender o fromtemplate método conforme explicado abaixo.

Código do controlador para método Fromtemplate

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

Conforme discutido acima, a segunda e a terceira maneira de adicionar popover é usar fromTemplateUrlmétodo. O código do controlador será o mesmo para ambas as formas, exceto ofromTemplateUrl valor.

Se o HTML for adicionado a um modelo existente, o URL será o popover.html. Se quisermos colocar o HTML na pasta de modelos, o URL mudará paratemplates/popover.html.

Ambos os exemplos foram explicados abaixo.

Código do controlador para fromTemplateUrl

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

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

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

Agora, vamos adicionar o script com modelo para o arquivo HTML, que estamos usando para chamar a função popover.

Código HTML do arquivo HTML existente

<script id = "popover.html" type = "text/ng-template">
   <ion-popover-view>
	
      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>
		
      <ion-content>
         Popover Content!
      </ion-content>
		
   </ion-popover-view>
</script>

Se quisermos criar um HTML como um arquivo separado, podemos criar um novo arquivo HTML no templates pasta e use o mesmo código que usamos no exemplo acima mencionado sem o script Tag.

O arquivo HTML recém-criado é o seguinte.

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>
	
   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

A última coisa que precisamos é criar um botão que será clicado para mostrar o popover.

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

Seja qual for a maneira que escolhermos nos exemplos acima, a saída será sempre a mesma.

A tabela a seguir mostra o $ionicPopover métodos que podem ser usados.

Método	Opção	Tipo	Detalhe
inicializar (opções)	scope, focusFirst, backdropClickToClose, hardwareBackButtonClose	objeto, booleano, booleano, booleano	Scopeé usado para passar o escopo personalizado para o popover. O padrão é $ rootScope.focusFirstInput é usado para focalizar automaticamente a primeira entrada do popover. backdropClickToClose é usado para fechar o popover ao clicar no pano de fundo. hardwareBackButtonClose é usado para fechar o popover quando o botão Voltar do hardware é pressionado.
show ($ event)	$ evento	promessa	Resolvido quando o popover termina de ser exibido.
ocultar()	/	promessa	Resolvido quando o popover termina de ser escondido.
retirar()	/	promessa	Resolvido quando o popover termina a remoção.
é mostrado()	/	boleano	Retorna verdadeiro se popover é mostrado ou falso se não é.