ng-book

Mobile Apps 461
Swipe directives example
$swipe Service
For more custom touch-based animations, we can use the $swipe service directly. The $swipe service
is a service that abstracts the details of hold-and-drag swiping behavior.
The $swipe service has a single method called bind(). This bind() method takes an element to
which it binds the swipe actions as well as an object with four event handlers.
These event handlers are called with an object that contains the coordinates object, like so: { x:
200, y: 300 }.
The four events handlers handle the following events:
• start
The start event is fired on either a mousedown or a touchstart event. After this event, the $swipe
service sets up watches for touchmove and mousemove events. These events are only fired until the
total distance moved exceeds a small distance (to prevent accidental swipes).
Once this distance has been surpassed, one of two events happens:
• If the vertical delta is greater than the horizontal, the browser takes over as a scroll event.
• If the horizontal delta is greater than the vertical delta, the action is considered a swipe, and
our move and end events are set to follow the swipe.
• move
The move event is called on mousemove and touchmove events only after the $swipe service has
determined that a swipe is, in fact, in progress.
• end