Skip to content

AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.

License

Notifications You must be signed in to change notification settings

wzr1337/angular-gestures

Folders and files

NameName
Last commit message
Last commit date
Apr 4, 2015
Aug 19, 2016
Jan 14, 2020
May 20, 2015
Oct 29, 2014
Oct 29, 2014
May 20, 2015
Aug 19, 2016
Oct 3, 2013
Nov 29, 2015
Jan 16, 2018
Apr 4, 2015
Apr 24, 2015
Jan 16, 2018

Repository files navigation

angular-gestures

AngularJS directive that adds support for multi touch gestures to your app, based on hammer.js.

Usage

  • Include gestures.js or gestures.min.js into your page
  • Declare 'angular-gestures' as a dependency for your angular app: angular.module('myApp', ['angular-gestures']);
  • Config the recognizers before you use the directive like this: hammerDefaultOptsProvider.set({recognizers: [[Hammer.Tap, {time: 250}]] });
  • Use attributes on containers the same way you use ng-click: e.g. hm-tap
<button hm-tap="add_something()">Tap me</button>
  • You can use angular interpolations like this : hm-swipe="remove_something({{ id }})"
  • You can also use Hammer.js options by e.g. hm-tap-opts="{hold: false}"

Note that hammer.js is an additional requirement and is not included in angular-gestures.

Event data

Pass the $event object in the usual way e.g. hm-drag="myDrag($event)" then access its internals like so:

$scope.myDrag = function(event) {
	console.log(event.gesture);
}

Refer to the Hammer.js docs for more details on the properties of event.

Supported events

  • hmDoubleTap : 'doubletap',
  • hmDragstart : 'dragstart',
  • hmDrag : 'drag',
  • hmDragUp : 'dragup',
  • hmDragDown : 'dragdown',
  • hmDragLeft : 'dragleft',
  • hmDragRight : 'dragright',
  • hmDragend : 'dragend',
  • hmHold : 'hold',
  • hmPinch : 'pinch',
  • hmPinchIn : 'pinchin',
  • hmPinchOut : 'pinchout',
  • hmRelease : 'release',
  • hmRotate : 'rotate',
  • hmSwipe : 'swipe',
  • hmSwipeUp : 'swipeup',
  • hmSwipeDown : 'swipedown',
  • hmSwipeLeft : 'swipeleft',
  • hmSwipeRight : 'swiperight',
  • hmTap : 'tap',
  • hmTouch : 'touch',
  • hmTransformstart : 'transformstart',
  • hmTransform : 'transform',
  • hmTransformend : 'transformend'

All Hammerjs events are supported. The corresponding Angularjs attribute has hm- prepended to the name. So for example, the 'doubletap' event becomes hm-double-tap etc.

Attention : *end and *start events are NOT CamelCased because of issues caused by $animate interference.

Default options

To set recognizer default options you can use hammerDefaultOptsProvider. Access it like in the demo:

angular.module('angularGesturesDemoApp', ['angular-gestures', 'ngRoute'])
  .config(function ($routeProvider, hammerDefaultOptsProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    hammerDefaultOptsProvider.set({
        recognizers: [[Hammer.Tap, {time: 250}]]
    });
  });

Bower

If you want to use angular-momentum-scroll with bower, add the following dependency to your component.json

"angular-gestures": "latest"

Require.js/AMD/Node.js

angular-gestures has support for Require.js/AMD/Node.js. When using AMD modules, make sure that you define hammer.js using Hammer, same goes for node.js. If you are not using Require.js/AMD/Node.js, angular-gestures will fall back to using the global Hammer/angular objects.

About

AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.

Resources

License

Stars

Watchers

Forks

Packages

No packages published