Currently, each tab maintains its own history stack. However while going from one tab to another the history isn’t maintained. Here is the case:
- (Tab 1)Homepage
- Tab 2 Stores
2.1 (Tab 2 inner) Store Detail - (Tab 3) Item list
3.1 (Tab 3 inner) Item Detail
It is possible to go directly to 2.1 store detail from 1 homepage. But there is no back button.
Similarly while going from 2.1 store detail to 3.1 item detail no back button.
Here is my code
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.home', {
url: '/dash',
views: {
'tab-map': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.store-list', {
url: '/stores',
views: {
'tab-stores': {
templateUrl: 'templates/tab-stores-listing.html',
controller: 'StoreListingCtrl'
}
}
})
.state('tab.store-detail', {
url: '/store/:storeID',
views: {
'tab-stores': {
templateUrl: 'templates/store-detail.html',
controller: 'StoreDetailCtrl'
}
}
})
.state('tab.item-list', {
url: '/items',
views: {
'tab-items': {
templateUrl: 'templates/tab-items-listing.html',
controller: 'ItemListingCtrl'
}
}
})
Can anything be done to achieve this behaviour by using tabs. or shall I need to user a normal button bar? Any suggestion will be appreciated.