angularjs - 如何在浏览器刷新时保留 ui-router 参数

Question

我正在使用 angular ui-router 来管理我的 SPA 的状态。
我有这条路线:

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

另外，我将“数据”参数作为 json 对象传递给状态。
现在当我第一次加载这个状态时，一切都很好。
但是当我刷新浏览器(F5 键)时，状态的解析函数中的 $stateParams.data 为空。

我该如何解决这个问题？
我看到这些可能的解决方案:
1. 以某种方式持久化参数
2.覆盖浏览器刷新(不知道如何)以停止浏览器刷新应用程序。
3. 刷新时转到其他兄弟状态。

请帮忙

更新
好的，我这样设置数据:

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

更新 2
roleEdit Controller 如下所示:

(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

有同样的问题，留在这里以防其他人需要它。使用 localStorage 解决了.

我已将此设置为应用程序 run 的一部分方法

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

现在，根据您的应用程序的结构，您可能需要考虑将其放在其他地方，但在我的情况下，我有父级 AppController围绕所有子 Controller ，所以这部分代码就在那里。

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

基本上，当用户点击浏览器刷新时，AppController 从一开始就被初始化(在子 Controller 之前)，如果有的话立即触发状态转换。否则，您将进入您的其他状态。