Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

swipe directive in ionic framework?

Does ionic has directives for swiping or other events?
I found this service: $ionicGesture. Should I make my own directives with this?

Or should I use something else like ngTouch?

like image 368
roeland Avatar asked Dec 05 '22 06:12

roeland


2 Answers

Seems like the swipe directives didn't exist when this question was active, but they are available now: http://ionicframework.com/docs/api/directive/onSwipe/

<button on-swipe="onSwipe()" class="button">Test</button>

Also avaiable: on-swipe-left, on-swipe-right, on-swipe-up and on-swipe-down.

like image 125
Shomz Avatar answered Feb 07 '23 12:02

Shomz


There aren't any swipe directives right out of the box, but since the events are exposed, it's pretty simple to throw something together.

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      var gestureType = attrs.gestureType;

      switch(gestureType) {
        case 'swipe':
          $ionicGesture.on('swipe', scope.reportEvent, elem);
          break;
        case 'swiperight':
          $ionicGesture.on('swiperight', scope.reportEvent, elem);
          break;
        case 'swipeleft':
          $ionicGesture.on('swipeleft', scope.reportEvent, elem);
          break;
        case 'doubletap':
          $ionicGesture.on('doubletap', scope.reportEvent, elem);
          break;
        case 'tap':
          $ionicGesture.on('tap', scope.reportEvent, elem);
          break;
      }

    }
  }
})

Check out this demo

like image 34
mhartington Avatar answered Feb 07 '23 14:02

mhartington