Come preservare i parametri del router-ui sull'aggiornamento del browser

Question

am utilizzando ui-router angolare per gestire gli stati della mia SPA. ho questo percorso:

.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(); 
        }      
       } 
      }) 

Inoltre, sto passando parametro 'dati' come oggetto JSON allo Stato. Ora, quando prima carico questo stato, tutto va bene. Ma quando eseguo l'aggiornamento del browser (tasto F5) $ stateParams.data è nullo nella funzione di risoluzione dello stato.

Come posso risolvere questo? Vedo queste possibili soluzioni: 1. persistere in qualche modo i parametri 2. aggiornare il browser (non so come) per interrompere il browser che aggiorna l'app. 3. durante l'aggiornamento goto stato di pari livello.

Aiutateci

UPDATE Ok, ho impostato i dati in questo modo:

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

UPDATE 2 Il controller roleEdit assomiglia a questo:

(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

lo farei stai lontano dall'opzione 2. Tu non vuoi rovinare il comportamento previsto del browser.

Forse si potrebbe refactoring i dati in oggetto la vostra determinazione ala:

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

Dove tua Dataservice sarebbe un servizio che si utilizza per memorizzare i dati, se è davvero così importante (tramite cookie o localStorage).

Non esiste alcun modo ragionevole per prevedere che il campo venga popolato all'aggiornamento del browser se in precedenza è stato eseguito javascript per passare ad esso valori di stato.

Answer 2

Aveva lo stesso problema, lasciando questo qui nel caso in cui qualcun altro ha bisogno. Risolto usando localStorage.

ho impostato questo come una parte del metodo di applicazione run

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

Ora, a seconda della struttura della tua applicazione che si potrebbe prendere in considerazione di mettere altrimenti questo da qualche parte, ma nel mio caso ho avuto genitore AppController circonda tutto controller figlio, quindi questa parte del codice è andata lì.

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

In sostanza, quando l'utente colpisce aggiornamento del browser, AppController ottenere inizializzati dall'inizio (prima controllori bambino), sparando la transizione di stato immediatamente se ci fosse uno. Altrimenti, andresti in un altro tuo stato.