Ionic - Javascript Popover

Questa è una visualizzazione che apparirà sopra la visualizzazione normale.

Utilizzando Popover

È possibile creare un popover utilizzando ion-popover-viewelemento. Questo elemento dovrebbe essere aggiunto al modello HTML e al file$ionicPopover il servizio deve essere inserito nel controller.

Esistono tre modi per aggiungere popover. Il primo è il filefromTemplatemetodo, che consente di utilizzare il modello in linea. Il secondo e il terzo modo per aggiungere popover è usare ilfromTemplateUrl metodo.

Cerchiamo di capire il fromtemplate metodo come spiegato di seguito.

Codice controller per metodo 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
   });
})

Come discusso sopra, il secondo e il terzo modo di aggiungere popover è usare fromTemplateUrlmetodo. Il codice del controller sarà lo stesso per entrambi i modi tranne per ilfromTemplateUrl valore.

Se l'HTML viene aggiunto a un modello esistente, l'URL sarà il file popover.html. Se vogliamo inserire l'HTML nella cartella dei modelli, l'URL cambierà intemplates/popover.html.

Entrambi gli esempi sono stati spiegati di seguito.

Codice controller per 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
   });
})

Ora aggiungeremo il file script with template nel file HTML, che stiamo usando per chiamare la funzione popover.

Codice HTML dal file HTML esistente

<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 vogliamo creare un HTML come file separato, possiamo creare un nuovo file HTML nel templates cartella e utilizzare lo stesso codice che abbiamo usato nell'esempio sopra menzionato senza l'estensione script tag.

Il file HTML appena creato è il seguente.

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

L'ultima cosa di cui abbiamo bisogno è creare un pulsante che verrà cliccato per mostrare il popover.

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

In qualunque modo scegliamo dagli esempi precedenti, l'output sarà sempre lo stesso.

La tabella seguente mostra il file $ionicPopover metodi che possono essere utilizzati.

Metodo	Opzione	genere	Dettaglio
inizializza (opzioni)	scope, focusFirst, backgroundClickToClose, hardwareBackButtonClose	oggetto, booleano, booleano, booleano	Scopeviene utilizzato per passare l'ambito personalizzato al popover. L'impostazione predefinita è $ rootScope.focusFirstInput viene utilizzato per mettere a fuoco automaticamente il primo input del popover. backdropClickToClose viene utilizzato per chiudere il popover quando si fa clic sullo sfondo. hardwareBackButtonClose viene utilizzato per chiudere il popover quando viene premuto il pulsante hardware Indietro.
mostra ($ evento)	$ evento	promettere	Risolto al termine della visualizzazione del popover.
nascondere()	/	promettere	Risolto quando il popover ha finito di nascondersi.
rimuovere()	/	promettere	Risolto al termine della rimozione del popover.
è mostrato()	/	Booleano	Restituisce vero se il popover è mostrato o falso se non lo è.