Hi,
I have tried nesting tabs using the default tabs templates created using $ ionic start myApp tabs… and it works just adding some styling to the nested tabs tag to avoid overlapping…
<ion-tabs class="tabs-icon-top has-header has-footer" style="background:#ff0000; border:1px solid red; top:44px; bottom:49px; height:auto;" delegate-handle="subtabs-handler">
(top, bottom and height are the ones to care, any other styling is for better spotting).
The only thing you have left to do is using $ionicTabsDelegate to make sure you are calling the right tabs…
.controller(‘SubTabCtrl’, function($scope, $state, $ionicTabsDelegate) {
//this call forces the loading of the subtab content so the panes are removed
$state.go(‘tab.account.subtab1’);
//the function to be called from the subtabs links
$scope.selectTabWithIndex = function(index) {
$ionicTabsDelegate.$getByHandle(‘subtabs-handler’).select(index);
switch (index){ case 0: $state.go('tab.account.subtab1'); break; case 1: $state.go('tab.account.subtab2'); break; case 2: $state.go('tab.account.subtab3'); break;
} }});
Being tab-account the tab is holding the subtabs… And having almost the same kind of abstract template as the tabs.html template. Just changing the href for the ng-click…
> <ion-tab title="sub tab 1" icon="icon ion-home" ng-click="selectTabWithIndex(0)">
> <ion-nav-view name="account-subtab1"></ion-nav-view>
> </ion-tab>
This should do the thing.
Cheers.