Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Angular- gestures

Il modulo angular-gestures fornisce un supporto completo per le tipiche gesture di interazione con un dispositivo mobile.
Il modulo angular-gestures fornisce un supporto completo per le tipiche gesture di interazione con un dispositivo mobile.
Link copiato negli appunti

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


Ti consigliamo anche