JarCastingangular-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
swipemodule 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
noPreventDefaultclass 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
noStartDragclass to the Google map HTML element