Ionic Framework - Using Same View for Multiple Tabs - ionic-framework

Question

I know this has been addressed a few times, but I am trying to figure out the right way to architect this solution:
I have 5 tabs, where all 5 tabs, where in these tabs, I need to use the same view and the same URL for multiple tabs. For example:
feedTab (/feed, tab is tab-feed) -> checkinDetail (checkin/:checkinId) -> ItemDetail (item/:itemId)
profileTab (/profile, tab is tab-profile) -> checkinDetail (checkin/:checkinId) -> ItemDetail (item/:itemId)
Is this possible? If not - what is the best way to do this in ionic using Tabs?

Answer 1

I have done this, you just need to define a state for each of the possible detail views. For example:
In my application I have a detail view that can be accessed from more than one tab.
templates/ride-detail.html
I have two tabs that can access the above detail view:
tab.profile
tab.rides
and they have states defined as below:
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'ProfileCtrl'
}
}
})
.state('tab.rides', {
url: '/rides',
params: {
issearch: null,
radius: null
},
views: {
'tab-rides': {
templateUrl: 'templates/tab-rides.html',
controller: 'RidesCtrl'
}
}
})
To enable the ride detail view to be accessed from the two above tabs I defined two states for this as below:
.state('tab.ride-detail', {
url: '/rides/:rideId',
views: {
'tab-rides': {
templateUrl: 'templates/ride-detail.html',
controller: 'RideDetailCtrl'
}
}
})
.state('tab.profile-detail', {
url: '/profile/:rideId',
views: {
'tab-profile': {
templateUrl: 'templates/ride-detail.html',
controller: 'RideDetailCtrl'
}
}
})
Then from the rides tab I call code below to get to detail view:
$state.go('tab.ride-detail', {
rideId: rideid
});
and from profile tab call:
$state.go('tab.profile-detail', {
rideId: rideid
});
Then in your view you can have ng-click="godetail(checkinId)"
and then change state call depending on the controller that the godetail function calls into, so in my case when godetail is called from profile tab:
$scope.godetail = function (rideid) {
$state.go('tab.profile-detail', {
rideId: rideid
});
};
and when called from rides tab:
$scope.godetail = function (rideid) {
$state.go('tab.ride-detail', {
rideId: rideid
});
};
Hope this helps.