Come è noto, una finestra modale occupa temporaneamente la view principale dell'applicazione per fornire informazioni o per acquisire dati. Possiamo creare una finestra modale utilizzando il servizio $ionicModal. Vediamo come utilizzare questo servizio partendo dal markup, come quello mostrato nell'esempio seguente:
<script id="myModal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Avviso</h1>
</ion-header-bar>
<ion-content>
Questa è una finestra modale!
</ion-content>
</ion-modal-view>
</script>Come possiamo vedere, abbiamo creato un template identificandolo con l'id mymodal.html, il cui markup è contenuto all'interno della direttiva ion-modal-view.
Nel controller della view che aprirà la finestra modale andremo a definire l'oggetto che rappresenta la finestra legandolo al template:
myApp.controller('MyCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('myModal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
});Come possiamo vedere, abbiamo definito la nostra finestra modale utilizzando il metodo fromTemplateUrl() del servizio $ionicModal. In alternativa avremmo potuto fornire il markup della finestra direttamente come stringa utilizzando il metodo fromTemplate(), ma tale approccio può essere conveniente solo per markup estremamente semplici.
Il secondo argomento del metodo fromTemplateUrl() rappresenta le opzioni con cui vogliamo attivare la finestra modale. Nel nostro caso abbiamo passato lo scope del controller in modo da poter condividere i dati ed abbiamo specificato l'effetto di animazione desiderato nella visualizzazione della finestra.
Il metodo fromTemplateUrl() restituisce una promessa che abbiamo sfruttato per assegnare l'oggetto modal allo scope del controller. Questo oggetto rappresenta la finestra stessa che possiamo mostrare o nascondere tramite i rispettivi metodi show() e hide().
Per visualizzare la finestra modale appena definita non dovremo fare altro che associare l'invocazione del metodo show() ad un elemento dell'interfaccia grafica, come nel seguente esempio:
<button ng-click="modal.show()">Apri modale</button>Un accorgimento fondamentale da tenere presente quando si utilizzano le finestre modali è la loro rimozione quando il controller in cui è stata creata non è più attivo. Questo consente al garbage collector di recuperare memoria ed evitare situazioni di memory leak. Per la rimozione della finestra modale è sufficiente gestire l'evento Angular $destroy all'interno del controller:
...
$scope.on("$destroy", function() {
$scope.modal.remove();
});Anche la visualizzazione di una popover, cioè di una finestra che occupa un'area ristretta della view corrente, segue un approccio analogo a quello delle finestre modali. La sua gestione si basa sulla direttiva ion-popover-view e sul servizio $ionicPopover. Il seguente codice rielabora l'esempio visto prima per la finestra modale in chiave popover:
<script id="myPopover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">Avviso</h1>
</ion-header-bar>
<ion-content>
Questa è una finestra modale!
</ion-content>
</ion-popover-view>
</script>
myApp.controller('MyCtrl', function($scope, $ionicPopover) {
$ionicPopover.fromTemplateUrl('myPopover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
});Il risultato visivo sarà analogo al seguente:
Realizzare alert(), confirm() e prompt() con le modal
Ionic prevede anche un servizio per la visualizzazione di finestre popup alternative a quelle predefinite attivate dai metodi standard alert(), confirm() e prompt(). Il servizio $ionicPopup infatti prevede metodi omonimi che prevedono però la possibilità di alcune personalizzazioni.
Consideriamo ad esempio il seguente codice:
$ionicPopup.alert({
title: "Attenzione...",
template: "Questo è un alert!",
okText: "Ho capito"
});Il metodo alert() del servizio $ionicPopup viene invocato passando un oggetto che contiene le opzioni di visualizzazione della popup. Il risultato sarà analogo a quello visualizzato dalla seguente figura:
In modo analogo possiamo visualizzare una popup di conferma:
$ionicPopup.confirm({
title: "Richiesta",
template: "Confermi l'eliminazione del record?",
okText: "Sì",
cancelText: "No"
}).then(function(conferma) {
if (conferma) {
//eliminazione del record
}
});In questo caso verrà visualizzata una popup con la possibilità di scegliere tra due pulsanti. Come possiamo vedere dal codice, il metodo confirm() restituisce una promessa che ci consente di gestire la risposta dell'utente. La promessa viene risolta con il valore booleano true se l'utente ha selezionato il pulsante di conferma, altrimento viene risolta con false.
Infine, il metodo prompt() consente di acquisire un valore inserito dall'utente. Il seguente è semplice un esempio di utilizzo del metodo:
$ionicPopup.prompt({
title: "Controllo codice",
template: "Inserisci il codice",
inputPlaceholder: "Il tuo codice"
}).then(function(codice) {
if (codice != "apritisesamo") {
$ionicPopup.alert({template: "Codice errato!"});
} else {
$ionicPopup.alert({template: "Codice esatto!"});
}
});Il risultato visivo è mostrato di seguito:
Anche in questo caso abbiamo gestito la promessa restituita dal metodo avendo accesso al valore inserito dall'utente.
Negli esempi di popup appena illustrati abbiamo fatto uso dell'opzione template per mostrare il messaggio all'utente limitandoci ad indicare una semplice stringa. In realtà possiamo assegnare del codice HTML all'opzione template per formattare come meglio crediamo il messaggio da visualizzare. Se il contenuto che vogliamo visualizzare è complesso, possiamo ricorrere all'opzione templateUrl che accetta l'url di un template HTML.
Se i metodi per la visualizzazione dei popup standard non fossero sufficienti per le nostre esigenze possiamo crearci la nostra finestra popup utilizzando il metodo show() di $ionicPopup.
Il metodo prevede tra le altre cose la possibilità di definire il proprio insieme di pulsanti passando un array di oggetti come nel seguente esempio:
$ionicPopup.show({
title: "Richiesta parere",
template: "Ti piace questa popup?",
buttons: [
{
text: "Sì",
onTap: function(e) {
return "Sì";
}
},
{
text: "No",
onTap: function(e) {
return "No";
}
},
{
text: "Non so",
onTap: function(e) {
return "Non so";
}
}
]
}).then(function(risposta) {
$ionicPopup.alert({template: "Hai risposto " + risposta});
});Abbiamo definito la nostra popup con tre pulsanti e per ciascun pulsante abbiamo gestito l'evento tap. Il gestore dell'evento si limita a restituire l'opzione scelta dall'utente, opzione gestita poi nella risoluzione della promessa. Il comportamento predefinito dei pulsanti di una popup prevede che la finestra si chiuda quando un pulsante viene selezionato. Se abbiamo necessità di mantenere aperta la popup in corrispondenza del tocco su un pulsante è sufficiente invocare il metodo preventDefault() dell'evento:
onTap: function(e) {
//...
e.preventDefault();;
}