Return to Question

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

.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: { ... } }) 

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

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 so:

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

If I begin editing an existing form, and then decide I want to create a new form midway and click the navbar which has a ui-sref for dashboard.loan.create the url changes from dashboard.loan.edit to dashboard.loan.create, the resolves in dashboard.loan.create are resolved, but the UI never refreshes, so the form input values are that of the form I was previously editing. In order to have the title update I added the controller again to both child states (which I didn't want to do) and added the code below to the controller, so it would update which type of action you were performing, but I can't figure out how to get the UI to refresh.

$scope.$watch( function() { return $state.params; }, function ( newParams ) { // Check if loan package instance id exists if( angular.isDefined( newParams.loanPackageInstanceId ) ) { self.title = 'Edit'; } else { self.title = 'Create' } }); 

Any suggestions?

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: "", controller: 'FormController', controllerAs: 'formCtrl', resolve: { ... } }) .state('dashboard.form.edit', { url: "/edit/:formPackageInstanceId", controller: 'FormController', controllerAs: 'formCtrl', 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?