Simple vertical and horizontal

Simple vertical/horizontal swipe gesture directives and a swipe service for angular js >= 1.6. Small extension of the existing angular $swipe service.

"angular-swipe": "~0.2.1" Include the required source file (this path or similar)

<script src="bower_components/dist/angular-swipe.js"></script> Inject the swipe module into your app.

angular.module('app', ['swipe']); Usage Module Name (Dependency) swipe Directives ng-swipe-up ng-swipe-down ng-swipe-left ng-swipe-right Directive Attributes

ng-swipe-disable-mouse "This attribute is useful for text that should still be selectable by the mouse and not trigger the swipe action."

<div class="page" ng-controller="AppCtrl"> <div class="container" ng-swipe-up="swipe($event)"> <h1>Swipe me up!</h1> </div> </div>

var app = angular.module('app', [ 'swipe' ]); app.controller('AppCtrl', function AppCtrl($scope) { $scope.swipe = function($event) { console.log($event); }; }) Known issues and workarounds

ng-swipe-up and ng-swipe-down uses preventDefault when you start swiping. This prevents clicks from giving focus to input fields. Adding a noPreventDefault class to these elements will not preventDefault when the swipe start on them and thus allow clicks to work.

When embedding a Google map you might want to prevent a swipe event specifically inside the map. You can do that by adding the noStartDrag class to the Google map HTML element