How to implement Swipe Gesture in IonicFramework?

Question

I want to attach swipe left and swipe right on the image using IonicFramework. I only got this from the documentation, but there is no example yet:

http://ionicframework.com/docs/api/service/ $ ionicGesture / http://ionicframework.com/docs/api/utility/ionic.EventController/#onGesture

Can someone help provide a sample HTML and JS to listen for gesture events?

PS: I used to be able to implement it using the SwileLeft and SwipeRight directives from angularjs: https://docs.angularjs.org/api/ngTouch/service/ $. But now I want to use the functions provided by the ion map.

Answer 1

Ionic has a set of directives that you can use to control various gestures and events. This will add a listener to the element and trigger an event when a specific event is detected. There are events for holding, clicking, scrolling, dragging, etc. Dragging and scrolling also have special directives to shoot only when the item is being dragged / moved in a direction (for example, on-swipe-left ).

Ionic documents: http://ionicframework.com/docs/api/directive/onSwipe/

Markup

 <img src="image.jpg" on-swipe-left="swipeLeft()" /> 

controller

 $scope.swipeLeft = function () { // Do whatever here to manage swipe left }; 

Answer 2

You can see some examples that you can do using ionic from this site . One of the drawbacks is that this gesture will fire while dragging and dropping multiple instances. If you catch it with a counter, you can check how many instances are fired for the gesture. This is my hacking technique in a drag and drop mechanism that you may need to change the integer dragCount to see which one is the package for your instance.

 var dragCount = 0; var element = angular.element(document.querySelector('#eventPlaceholder')); var events = [{ event: 'dragup', text: 'You dragged me UP!' },{ event: 'dragdown', text: 'You dragged me Down!' },{ event: 'dragleft', text: 'You dragged me Left!' },{ event: 'dragright', text: 'You dragged me Right!' }]; angular.forEach(events, function(obj){ var dragGesture = $ionicGesture.on(obj.event, function (event) { $scope.$apply(function () { $scope.lastEventCalled = obj.text; //console.log(obj.event) if (obj.event == 'dragleft'){ if (dragCount == 5){ // do what you want here } dragCount++; if (dragCount > 10){ dragCount = 0; } //console.log(dragCount) } if (obj.event == 'dragright'){ if (dragCount == 5){ // do what you want here } dragCount++; if (dragCount > 10){ dragCount = 0; } //console.log(dragCount) } }); }, element); }); 

add this line to your html template

 <ion-content id="eventPlaceholder" has-bouncing="false">{{lastEventCalled}}</ion-content>