UI-router view not refreshed when revisiting state

Issue

I my AngularJS application I have created a simple wizard-style setup with a static state for the overall wizard page and dynamic states for all the separate wizard sub-pages. Using a simple list I can switch between wizard sub-pages but I find that revisiting a sub-page doesn’t properly refresh the view.

I’m using @ui-router/angularjs (1.0.20) and @ui-router/core (5.0.21) together with AngularJS (1.5).

To pass data to the components for each wizard sub-page I add additonal attributes to the <div ui-view></div> and each component has bindings for the attributes it needs. This works as I see the component $onChanges hook being called for each visit. The component also loads the HTML template but doesn’t refresh properly when revisiting. Static text and initial values are displayed but the updated data is not shown.

So how can I force a refresh of the page? I’ve tried using

$state.go(state, params, { reload: true, inherit: true, notify: true });

to enter the state but that doesn’t seem to work.

Solution

After some more checking I found that adding a $timeout around the function to fill the form data in the component $onChanges solves the issue.

Answered By – Kees de Bruin

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.