How to use hammer.js with Angular.js - touch

Question

I'm new with Angular.js and reading i know angular dont have events like tap, double tap, etc. I'm trying to combine with Hammer.js without success.
Code from gist
/**
* angular-hammer.js
* 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});
});
});
};
}]);
});
now i've added to my html file
<!--...-->
<script src="/js/jquery-1.9.0.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/hammer.js"></script>
<script src="/js/jquery.hammer.js"></script>
<script src="/js/angular-hammer.js"></script>
<script src="/js/app/controllers.js"></script>
</html>
But when i try to use in my html it doesn't work.
I've tried with
<li hmTap="click($event)">...</li>
<li ngTap="click($event)">...</li>
<li hm-tap="click($event)">...</li>
<li ng-tap="click($event)">...</li>
no one works, can help me with this trouble?

Answer 1

Give this a go.
Add hammer.js and jquery.hammer.js to your solution. With JQuery and Angular.
Something like this:
<script src="js/jquery/jquery.min.js"></script>
<script src="js/hammer/hammer.js"></script>
<script src="js/hammer/jquery.hammer.js"></script>
<script src="js/angular/angular.min.js"></script>
Then use Angular directives to define new HTML attributes.
In this example I am creating a new attribute called on-tap
angular.module('myApp.directives', [])
.directive('onTap', function () {
return function (scope, element, attrs) {
return $(element).hammer({
prevent_default: false,
drag_vertical: false
})
.bind("tap", function (ev) {
return scope.$apply(attrs['onTap']);
});
};
});
You can then create a directive per Hammer event:
hold, tap, doubletap, transformstart, transform, transformend, dragstart, drag, dragend, release, swipe.
Your HTML would then look like this:
<button on-tap="DoAngularMethod()">Tap me</button>

Answer 2

Here is exactly what are you looking for:
https://github.com/wzr1337/angular-gestures
this new libary allows you to implement all of gestures you need.
also read this:
http://www.ng-newsletter.com/posts/angular-on-mobile.html
Hope you find it interesting.
:)

Answer 3

There are some hammer directive implementations for Angular you could try to use:
https://github.com/randallb/angular-hammer
https://github.com/dreame4/angular-hammer

Answer 4

I used randallb lib and i added
'hmPan:pan',
'hmPanLeft:panleft',
'hmPanRight:panright',
in the hmGestures array, so i can use pan too!