I’ve been trying to get nested tabs to work for quite a while now but I just can’t seem to get it working.
I have a nested tab view in a tab view, looking like this:
Now when I move to a different tab in the nested tab like so:
And then move to a different top level tab, like so:
And then move back to the nested tabs I would like to see the second picture again, but instead I see the first.
My states for the nested tabs look like this:
.state('tabs.exhibition', {
url: '/exhibition',
views: {
'exhibition-tab@tabs': {
templateUrl: 'app/components/tabs/tabs.exhibitors.html',
controller: 'ExhibitorsTabsCtrl'
}
}
})
// Exhibitors
.state('tabs.exhibition.exhibitors', {
url: '/exhibitors',
views: {
'exhibitors-content': {
templateUrl: 'app/components/exhibitors/exhibitors.html',
controller: 'ExhibitorsCtrl'
}
}
})
// Products
.state('tabs.exhibition.products', {
url: '/products',
views: {
'products-content': {
templateUrl: 'app/components/products/products.html',
controller: 'ProductsCtrl'
}
}
})
And my tab like this:
<ion-tab title="exhibition" icon-off="ion-grid" icon-on="ion-grid" ui-sref="tabs.exhibition.exhibitors">
<ion-nav-view name="exhibition-tab"></ion-nav-view>
</ion-tab>
I have already tried binding the ui-sref to a variable and setting that in the scope, but this doesn’t update when I change the scoped variable. Another approach I tried was binding a ng-click to the tab and then using $state.go(...)
but for some reason this only changes the url and does not update the view.
Any thoughts?