malikov / angular-hammer

Hammer.js adapter for AngularJS

angular-hammer

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.

Usage

Installation

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.

Basic Example

<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>

Passing options

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>

License

MIT