angular-hammer is a Hammer.js adapter for AngularJS. It gives a possibility to use directives which handle Hammer.js gestures.
angular-hammer defines a single directive for each gesture. The directives are build in the following way: hammer-{hammer_gesture}
, for instance hammer-tap
. Here you can find all available gestures.
Include angular-hammer.js
into your html file, after angular.js
library.
<script src="/path/to/angular.js"></script>
<script src="/path/to/angular-hammer.js"></script>
Next, load hammer
module and that's all, you can use angular-hammer directives.
<div ng-controller="Main">
<div class="box" hammer-tap="changeColor($event)">Tap</div>
</div>
<script>
angular.module('myApp', ['hammer'])
.controller('Main', ['$scope', function($scope) {
$scope.changeColor = function changeColor(e) {
console.log(e.currentTarget);
e.currentTarget.classList.toggle('red');
};
}]);
</script>
Hammer.js has several gesture options. They can be passed in this way:
<span class="test-item" hammer-tap="{ fn: 'changeColor($event)', hold_timeout: 1000 }"></span>
MIT