Un supporto più completo per le tipiche gesture di interazione con un dispositivo mobile è fornito dal modulo angular-gestures. Il modulo è basato sulla libreria Hammer.js, da cui deriva il prefisso hm delle sue direttive, e supporta interazioni come tap, doppio tap, swipe, drag, pinch e rotate.
Al solito, per utilizzare il modulo nella nostra applicazione inseriamo il riferimento allo script e dichiariamo la dipendenza:
<script src="gestures.js"></script>
...
angular.module('myApp', ['angular-gestures', ...])L'utilizzo delle direttive messe a disposizione da angular-gestures è molto semplice. Il seguente codice è la trasposizione del codice visto per ngTouch per la navigazione in una galleria di immagini arricchito di altre funzionalità:
<div hm-swipe-left = "showNextImage($event)"
hm-swipe-right = "showPreviousImage($event)"
hm-pinch-in = "pinchInImage($event)"
hm-pinch-out = "pinchOutImage($event)"
hm-rotate = "rotateImage($event)">
<img src="{{currentImage}}">
</div>Come possiamo vedere, oltre agli eventi di swiping a destra e sinistra abbiamo la possibilità di gestire la gesture pinch per ingrandire (hm-pinch-out) o rimpicciolire (hm-pinch-in) l'immagine e la rotazione (hm-rotate).
Ciascun gestore riceve come argomento l'oggetto $event che fornisce i dettagli dell'evento.
Link utili