barro32 barro32 - 6 months ago 26
AngularJS Question

UI Router stateParams not updating in child routes

I had a route with a param working but then added some child routes and now it will not update.

Event Template

<a ui-sref="event.detail({id: event.id})" ng-repeat="event in events">
Event {{event.id}}
</a>


UI Router

.state('event', {
url: '/event',
views: {
'event': {
template: ..., // shown above
controller: 'Event'
}
}
})
.state('event.detail', {
url: '/:id',
views: {
'event-detail': {
template: ...,
controller: 'EventDetail' // shows a single event
}
}
})
// tabs to switch between the different details
.state('event.detail.info', {
url: '/info',
views: {
'event-info': {
template: ...
}
}
})
.state('event.detail.map', {
url: '/map',
views: {
'event-map': {
template: ...
}
}
})
.state('event.detail.chat', {
url: '/chat',
views: {
'event-chat': {
template: ...
}
}
})


Controller

function EventDetail($scope, $stateParams) {
$scope.getEventDetails = getEventDetails;

$scope.getEventDetails($stateParams.id);

function getEventDetails(id) {
console.log(id); // returns correct first time, then nothing. Used to work every time!
...
}
}


Run through of what's going wrong:


  • click on
    Event 1

  • url changes to
    event/1
    and gets the right event details

  • go back to list and click on
    Event 2

  • url changes to
    event/2
    but displays details for event 1

  • click on the info, map or chat tab and the url changes from
    event/2
    to
    event/1/info
    ,
    event/1/map
    and
    event/1/chat


Answer

The solution was to user cache: false in the event.detail states and it's child states.

Comments