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?
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
.
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;
}
}
}
})
looks like what you need is documented here?
http://ionicframework.com/docs/api/utility/ionic.EventController/#onGesture
There is a great tutorial explaining how to do that with Ionicframework and AngularJS http://ionicframework.com/blog/ionic-swipeable-cards/
Basically you gonna create a View using the Ionicframework objetcs/functions like the snippet bellow, and create a directive that will call it. See details in the tutorial.
var SwipeableCardView = ionic.views.View.inherit({
initialize: function(opts) {
// Store the card element
this.el = opts.el;
this.bindEvents();
},
bindEvents: function() {
var self = this;
ionic.onGesture('drag', function(e) {
// Process drag
}, this.el);
ionic.onGesture('dragend', function(e) {
// Process end of drag
}, this.el);
},