xuyannan / angular-swipe

Simple vertical and horizontal swipe gesture directive for angular js

angular-swipe

Simple vertical/horizontal swipe gesture directives and a swipe service for angular js >= 1.5. 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.0"

• 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