如何在浏览器刷新时保留ui-router参数 [英] How to preserve ui-router parameters on browser refresh

问题描述

am使用角度ui路由器管理我的SPA的状态. 我有这条路线:

am using angular ui-router to manage states 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();
                    }                       
                }
            })

另外，我正在将'data'参数作为json对象传递给状态. 现在，当我第一次加载此状态时，一切都很好. 但是，当我执行浏览器刷新(F5键)时，该状态的resolve函数中的$ stateParams.data为null.

Also, I'm passing 'data' parameter as json object to the state. Now when i first load this state, everything is fine. But when i do browser refresh (F5 key) the $stateParams.data is null in the resolve function of the state.

我该如何解决? 我看到了这些可能的解决方案: 1.以某种方式坚持参数 2.覆盖浏览器刷新(不知道如何)以停止浏览器刷新应用程序. 3.在刷新时转到其他同级状态.

How can I solve this? I see these possible solutions: 1. persist somehow parameters 2. override browser refresh (don't know how) to stop the browser refreshing the app. 3. on refresh goto other sibling state.

请帮助

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

UPDATE Ok, I set data like this:

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

更新2 roleEdit控制器如下所示:

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

推荐答案

遇到了同样的问题，请留在这里以防其他人需要.通过使用localStorage来解决.

Had the same problem, leaving this here in case someone else needs it. Solved it by using localStorage.

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

I've set this as a part of app's run method

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

现在，根据您应用程序的结构，您可能需要考虑将其放置在其他位置，但是就我而言，我的父级AppController包围了所有子控制器，因此这部分代码就到了.

Now, depending on your app's structure you might want to consider putting this someplace else, but in my case I had parent AppController surrounding all child controllers, so this part of the code went there.

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

基本上，当用户点击浏览器刷新时，AppController从头开始初始化(在子控制器之前)，如果存在则立即触发状态转换.否则，您将进入其他状态.

Basically, when user hits browser refresh, AppController get initialized from the start (before child controllers), firing the state transition immediately if there was one. Otherwise, you'd go to some other state of yours.

这篇关于如何在浏览器刷新时保留ui-router参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！