angular-hammer-recognizers is a Hammer.js adapter for AngularJS. It allows one to use directives which handle Hammer.js recognizers.
angular-hammer-recognizers defines a single directive for each gesture recognizer. The directives are build in the following way: hm-{HAMMER_RECOGNIZER}, for instance hm-tap.
Using Bower:
$ bower install angular-hammer-recognizers --save
Using npm:
$ npm install angular-hammer-recognizers --save
Or manually, downloading a suitable file from dist directory.
Then, place Angular.js, Hammer.js and angular-hammer-recognizers into your HTML:
<script src="/bower_components/hammerjs/hammer.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-hammer-recognizers/dist/angular-hammer.js"></script>And finally, inject the hammer module into your app:
angular.module("app", ["hammer"]);To add a simple tap gesture recognizer use hmTap directive:
<div hm-tap="method($hmEvent)"></div>If you want to specify more options use with keyword:
<div hm-tap="method($hmEvent) with { taps: 2 }"></div>or hmTapOpts directive:
<div hm-tap="method($hmEvent)" hm-tap-opts="{ taps: 2 }"></div>In some situation you may want to add a gesture recognizer which does not trigger $digest cycle automatically. In order to do this, add -o prefix to the directive, e.g. hm-pan-o="method($hmEvent).
The following directives are available in an optimized form: pan, pinch, rotate.
- Changed lib name to
angular-hammer-recognizers.
- Directives based on HammerJS recognizers.
MIT