Swipe navigation for ion-tabs (for ionic framework v 1.0.0)

ion-tabs-swipable.js

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);
		    });
		}
	};
}]);

Since I see an ion-tabs and ion-slide-box module in a project of mine, I'm going to try to combine the two to have swipe tab support. Wish me luck.

Any luck? @abegit

How can I add animation in the transition ?

for any body struggling with this I worked around the problem using a watcher on the selected index and then a "reverse" css style on ng-class:

js:

$scope.previousTab = 0;
$scope.currentTab = 0;
$scope.$watch(function() {return $ionicTabsDelegate.selectedIndex();}, function(index) {
      $scope.previousTab = $scope.currentTab;
      $scope.currentTab = index;
});

html:
<ion-tabs tabs-swipable class="tabs-positive slide-left-right" ng-class="{reverse: currentTab < previousTab}">

hope this helps someone else out.

Here is a starter template with the above gist. Would try to add animation. Contributions are welcome

https://github.com/SrijithRad/ionic-swipeable-tabs-demo

In case someone else is looking for animated tabs or swipable tabs, i just created a directive (inspired by @SrijithRad ) for that matter.
just give it a try, GitHub repository.