CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
mtpultz
mtpultz

Reputation: 18248

UI-Router StateChange but view UI doesn't refresh

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"}

Upvotes: 2

Views: 1510

Answers (1)

hon2a
hon2a

Reputation: 7214

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.)

Upvotes: 2

Related Questions