How to implement Swipe Gesture in IonicFramework?

Question

I want to attach swipe left & swipe right on an image using IonicFramework. From the documentation, I only got these, but no example yet:

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

Can anyone help provide sample HTML & JS to listen to gesture event?

P.S.: Previously, I managed to implement it using angularjs SwipeLeft and SwipeRight directive: https://docs.angularjs.org/api/ngTouch/service/$swipe . But now I wish to use the functions provided by ionicframework.

Answer 1

Ionic has a set of directives that you can use to manage various gestures and events. This will attach a listener to an element and fire the event when the particular event is detected. There are events for holding, tapping, swiping, dragging, and more. Drag and swipe also have specific directives to only fire when the element is dragged/swiped in a direction (such as on-swipe-left).

Ionic docs: 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
};