2

I'm using UI-Router to either load a view with a new form, or edit an existing form.

A new form has a url of: #/dashboard/form/someFormType

A editable form has a url of: #/dashboard/form/someFormType/edit/instanceid

The route states are set up like below, with a abstract state that resolves entries used by both child states, which then resolve their own entries.

.state('dashboard.form', { url: "/form/:formType", abstract: true, controller: 'FormController', controllerAs: 'formCtrl', templateUrl: '/app/dashboard/views/form.html', resolve: { ... } }) .state('dashboard.form.create', { url: "", resolve: { ... } }) .state('dashboard.form.edit', { url: "/edit/:formPackageInstanceId", resolve: { ... } })

If I begin editing an existing form in dashboard.edit.form, and then decide I want to create a new form midway and click the navbar which has a ui-sref for dashboard.form.create the url changes from dashboard.form.edit to dashboard.form.create, the resolves in dashboard.form.create are resolved, but the UI never refreshes, so the form input values are that of the form I was previously editing...

Any suggestions?

Update

With some help I found some code that logs route issues:

// Add state change hooks to log issues to console .run(function($rootScope, $state, $urlMatcherFactory) { $rootScope.$state = $state; function message(to, toP, from, fromP) { return from.name + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP); } $rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { console.log("Start: " + message(to, toP, from, fromP)); }); $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); }); $rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error: " + message(to, toP, from, fromP), err); }); });

It doesn't through any errors, and logs a start and successful completion of state change:

Start: dashboard.form.edit{"formPackageType":"corporation","formPackageInstanceId":"574"} -> dashboard.form.create{"formPackageType":"corporation"} Success: dashboard.form.edit{"formPackageType":"corporation","formPackageInstanceId":"574"} -> dashboard.form.create{"formPackageType":"corporation"}
Improve this question
3
  • When debugging problems w/UI-Router, I've found it very useful to add a listener for "$stateChangeError" events dispatched by UI-Router. Check out how to do it towards the bottom of this documentation page. Commented Nov 21, 2014 at 0:02
  • Might be some Error during transition or resolving. Sometimes no error messages are given in such situations. You can try the $stateChangeError event like @SunilD. states. Commented Nov 21, 2014 at 6:56
  • Hi @SunilD. I updated my code using your suggestion, but it doesn't appear to through an error, and resolves, but doesn't refresh the UI Commented Nov 21, 2014 at 8:12

1 Answer 1

Reset to default
2

Your form template resides in the parent state. When you go from one child state to the other, their parent is not reloaded (or, to be more accurate, when you go from one state to another, none of their common ancestors are reloaded).

However, that doesn't mean you can't clear the form on sub-state change. You can do one of the following:

  1. Move the template to the sub-states to make it completely re-construct on each state change. Take care to use a "plain container" template () in the parent state, so that the sub-state templates have a place to be rendered into.
  2. Put your data in the parent scope. Child states have access to it, so you can manually edit the data on child state controllers' construction. (Just take care not to overwrite parent scope properties.)

(I've edited the answer to include main points from the discussion below.)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hi @hon2a I understand what you're saying in the first paragraph, and that makes sense. I thought maybe if that's true, I could move the templateUrl into each separate child state to make them reload separately, and move it out of the parent, but the page didn't load afterwards, which I don't understand. I don't understand your second paragraph, how do I access the parent scope of the parent from the child? or I guess more specifically where? In a child controller?
If you move the template to both sub-states, you need to use a "plain container" template (<div ui-view></div>) in the parent state, so that the sub-state templates have a place to be rendered into.
Sub-state scopes are descendants of super-state scope, so you can access super-state scope properties from sub-state controllers. (Just take care not to overwrite super-state properties.)
Thanks @hon2a, I ended up adding a plain container and it works great. I'm just reading through the link, thanks for that. You should post these as an answer. Cheers
Ok, I'll add the info to my answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.