I have a set of two tabs in ionic 1.x using the ui-router, which displays the proper templates etc, and where the abstract parent state holds the $stateParam. When I $state.go to a tab for the first time everything is correct with regards to the tabs URL parameters, but when return to the first or second tab after navigating away they have the correct URL parameters, and I when click the other tab it has the old state param in the URL. I placed an example below to clarify the issue.
ROUTES
.state('dashboard.rental.edit', {
url: "/:id/edit",
abstract: true,
templateUrl: "templates/dashboard/rentals/rental-tabs.html"
})
.state('dashboard.rental.edit.dates', {
url: "/dates",
views: {
'rental-dates': {
templateUrl: "templates/dashboard/rentals/rental-dates.html",
controller: 'EditRentalDatesController',
controllerAs: 'editRentalDatesCtrl'
}
})
.state('dashboard.rental.edit.update', {
url: "/rental",
views: {
'rental-update': {
templateUrl: "templates/dashboard/rentals/rental-update.html",
controller: 'EditRentalController',
controllerAs: 'editRentalCtrl'
}
}
})
EXAMPLE - CORRECT
The first time I hit $state.go('dashboard.rental.edit.dates') I get:
/dashboard/rental/2/edit/dates
in the URL, and when I click the second tab I get:
/dashboard/rental/2/edit/rental
which is what it should be.
EXAMPLE - INCORRECT
The second time I hit $state.go('dashboard.rental.edit.dates') after choosing a different rental I get:
/dashboard/rental/3/edit/dates
in the URL, but when I click the second tab I get:
/dashboard/rental/2/edit/rental
Which is the previous parameter 2, and not the new parameter 3.
If I refresh the page in one of the tabs correct parameter will be available in the other tab, so it appears to be something I'm doing or don't understand about the ui-router.
What don't I understand about the ui-router that the $stateParams of the abstract parent don't display properly in the tabbed child view after the initial visit? Or is this an issue using ion-tabs with ui-router?