Skip to content

Instantly share code, notes, and snippets.

@raidenz
Forked from taivo/ion-tabs-swipable.js
Created October 31, 2016 03:35
Show Gist options
  • Save raidenz/4a82c20a5bc36e3e16eca2f37eae458b to your computer and use it in GitHub Desktop.
Save raidenz/4a82c20a5bc36e3e16eca2f37eae458b 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