/angular-swipe

Simple vertical and horizontal swipe gesture directive for angular js

Primary LanguageJavaScriptMIT LicenseMIT

angular-swipe

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

Install

  • Add this line to your bower.json dependencies and run bower install afterwards.
"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."

Service

  • swipe

Example

<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