Angular- gestures

10 novembre 2015

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

Tutte le lezioni

1 ... 35 36 37 38

Se vuoi aggiornamenti su Angular- gestures inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Angular- gestures

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy