How to save ui-router settings when updating browser

Question

using angular ui-router to manage the state of my SPA. I have this route:

.state('index.administration.security.roleEdit', { url: '/roleEdit', templateUrl: 'app/administration/security/role/roleEdit.html', controller: 'roleEditCtrl', controllerAs: 'roleEditCtrl', params: { data: null }, resolve: { role: function ($stateParams) { return angular.fromJson($stateParams.data); }, modules: function (securityService) { return securityService.getAllModules(); } } }) 

In addition, I pass the parameter 'data' as a json object to state. Now, when I first load this state, everything is in order. But when I update the browser (key F5), $ stateParams.data is zero in the state resolution function.

How can i solve this? I see these possible solutions: 1. Save the settings somehow 2. Override the browser update (do not know how) to stop the application from updating the browser. 3. on goto update another state of marriage.

Please, help

UPDATE Alright, I set the data as follows:

 vm.editRole = function(roleId){ var role = dataService.getRoleById(roleId).then(function(result){ $state.go('roleEdit', {data:angular.toJson(result)}); }); } 

UPDATE 2 The roleEdit controller looks like this:

 (function(){ angular.module('app.administration').controller('roleEdit', ['role','modules', '$scope', 'securityService', '$state', roleEditCtrl]); function roleEditCtrl('role', 'modules',$scope, securityService, $state){ var vm = this; vm.roles = roles; vm.originalRole = angular.copy(role); vm.modules=modules; vm.saveChanges = _saveChanges; vm.cancel = _cancel; return vm; function _saveChanges(){ securityService.UpdateRole(vm.role).then(function(result){ $staste.go('^.roles'); } } function _cancel(){ vm.role = angular.copy(vm.originalRole); $sscope.roleEditForm.$setPristine(); } } })(); 

Answer 1

There was the same problem leaving it here if someone needed it. Solved it using localStorage .

I installed this as part of the app run method

 $rootScope.$on('$stateChangeSuccess', function (event, toState) { localStorage.setItem('__stateName', toState.name); }); 

Now, depending on the structure of your application, you might want to put it somewhere else, but in my case I had a parent AppController surrounding all the child controllers, so this piece of code went there.

 var previousState = localStorage.getItem('__stateName'); previousState && $state.go(previousState) || $state.go(<SOME_OTHER_ROUTE>); 

Basically, when a user accesses a browser update, the AppController is initialized from the very beginning (to the child controllers), immediately starting the state transition, if any. Otherwise, you will be in another state of yours.

Answer 2

I would stay away from option 2. You do not want to spoil the expected behavior of the browser.

Perhaps you could reorganize your data into your ala permission object:

 resolve: { role: function ($stateParams) { return angular.fromJson($stateParams.data); }, modules: function (securityService) { return securityService.getAllModules(); }, data: function (dataService) { return dataService.retrieveStoredData(); } 

If your dataService will be the service you use to store this data, if it is really that important (via cookies or localstorage).

There is no reasonable way to expect this field to be populated when the browser is updated if you have previously run javascript to pass status values ​​to it.