Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
Hammer.js integration with AngularJS
* Inspired by AngularJS' implementation of "click dblclick mousedown..."
* This ties in the Hammer events to attributes like:
* hm-tap="add_something()"
* hm-swipe="remove_something()"
* and also has support for Hammer options with:
* hm-tap-opts="{hold: false}"
* or any other of the "hm-event" listed underneath.
angular.forEach('hmTap:tap hmDoubletap:doubletap hmHold:hold hmTransformstart:transformstart hmTransform:transform hmTransforend:transformend hmDragstart:dragstart hmDrag:drag hmDragend:dragend hmSwipe:swipe hmRelease:release'.split(' '), function(name) {
var directive = name.split(':');
var directiveName = directive[0];
var eventName = directive[1];
['$parse', function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr[directiveName]);
var opts = $parse(attr[directiveName + 'Opts'])(scope, {});
element.hammer(opts).bind(eventName, function(event) {
scope.$apply(function() {
console.log("Doing stuff", event);
fn(scope, {$event: event});
somewhere near the bottom of the page:
<!-- Hammer JS for multi-touch events -->
<script src="static/js/libs/hammer.js"></script>
<script src="static/js/libs/jquery.hammer.js"></script>
<!-- AngularJS libs -->
<script src="static/js/libs/angular/angular-1.0.1.min.js"></script>

Could I use this to enable touch-drag/drop of items in a (ng-repeat) list ? If so, could you give me an example?


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.