To use with http://yeoman.io/ do the following:
- Open bower.json or components.json
"angular-gesture": "~1.4.0"to your dependency list
- In your application you can now add: (depending on what you need)
Supports the following gestures out of the box
- click (tap)
- double click (double tap)
- swipe (up, down, left and right)
Inspired by AngularJS Touch (API compatible)
How it works
Angular gesture takes a different approach to handling input events to most gesture libraries.
Instead of only dealing with events that fall on the element, pointers are captured so events continue to be processed by the element they originally touched.
This means if you drag too fast or your pointer falls outside the object you are interacting with the gesture isn’t cancelled.
Events are then passed up the DOM from that original touch point.
Events are assigned to DOM elements via attributes
<div ng-swipe-left="functionInScope($event, $element)"></div>
Where when the user swipes left on a touch device (or clicks and rapidly moves the mouse left) the function is called.
$element are optional and can be passed to the function in any order
Modifying default behaviour
- Somtimes you’ll only want to events to trigger if the user directly touches the element (versus an element further up the DOM)
on-targetto the element
<div ng-touch="handler()" on-target>
- Sometimes you may not want to capture the mouse pointer. This can break form interactions.
no-captureto the element
- Sometimes you don’t want the interaction to propagate to elements below the current element
ng-stopdirective to the element
- This is a shortcut for
Browser behaviours and event defaults are also modifyable via element attributes. Below are the defaults
Each event type has its own default settings for limits, breakpoints, etc all can be changed via attributes.