Skip to content

@abourget /directives.js
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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];
angular.module('MYMODULE').directive(directiveName,
['$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>
@edd-oliveira

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

Thanks

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.