Skip to content

Instantly share code, notes, and snippets.

@Rakonda
Forked from taivo/ion-tabs-swipable.js
Created November 8, 2016 09:45
Show Gist options
  • Save Rakonda/06b88cd5309ae0ee5efbe9e3b998645e to your computer and use it in GitHub Desktop.
Save Rakonda/06b88cd5309ae0ee5efbe9e3b998645e to your computer and use it in GitHub Desktop.
Swipe navigation for ion-tabs (for ionic framework v 1.0.0)
angular.module('yourModule')
.directive('tabsSwipable', ['$ionicGesture', function($ionicGesture){
//
// make ionTabs swipable. leftswipe -> nextTab, rightswipe -> prevTab
// Usage: just add this as an attribute in the ionTabs tag
// <ion-tabs tabs-swipable> ... </ion-tabs>
//
return {
restrict: 'A',
require: 'ionTabs',
link: function(scope, elm, attrs, tabsCtrl){
var onSwipeLeft = function(){
var target = tabsCtrl.selectedIndex() + 1;
if(target < tabsCtrl.tabs.length){
scope.$apply(tabsCtrl.select(target));
}
};
var onSwipeRight = function(){
var target = tabsCtrl.selectedIndex() - 1;
if(target >= 0){
scope.$apply(tabsCtrl.select(target));
}
};
var swipeGesture = $ionicGesture.on('swipeleft', onSwipeLeft, elm).on('swiperight', onSwipeRight);
scope.$on('$destroy', function() {
$ionicGesture.off(swipeGesture, 'swipeleft', onSwipeLeft);
$ionicGesture.off(swipeGesture, 'swiperight', onSwipeRight);
});
}
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment