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.

Solution 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
};

Solution 2

You can see some of sample which you can do with ionic from this site. One of the drawback is that the gesture will fire multiple instances during drag. If you catch it with a counter you can check how much the instances being fired per gesture. This is my hack method within the firing mechanism of of drag gesture you might need to change the dragCount integer to see which one is suite 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 in your html template

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

Comments

[mr5]

What is $scope? Is it a reference to the <img> tag?

[SupimpaAllTheWay]

@mr5 you can see $scope in the angular docs, it basically establish a communication between the view and the controllers. Checkout the hello world sample: docs.angularjs.org/guide/scope

[David O'Regan]

$scope is the object in question triggering the function and all the properties it has access to.