微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs ui-router stateparams页面刷新时看不见丢失

正在进行一个角度项目,我已经设置了我的状态,如下所示.

$stateProvider.state('UserPanel',{
    url: '/user',params: { userId: null },views: {
        'content@': {
            templateUrl: '/AngViews/UserPanel/UserPanel.UserDetails.html'
        }
    }
});

当我导航到视图时,它会使用它的参数,所以这部分正在工作.

但是当我更新页面时,它失去了参数.
我知道如果我在url变量中定义了参数,它将起作用.但我想让它隐形.

我找到了像this这样的东西,但不知道它是否能解决我的问题.如果确实如此,它就无法运作.有谁可以解释如何做到这一点?

谢谢你的时间

解决方法

我遇到了同样的问题并用这段代码解决

angular.module('app').run(function($rootScope,$state,localStorageService) {

  $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams) {
   var prefix = "stateParams.";
   var fromStateName = prefix + fromState.name;
   var toStateName = prefix + toState.name;
   var f = true;
   for (var k in toState.params) {
     f = f && (JSON.stringify(toParams[k]) == JSON.stringify(toState.params[k]));
   }
   if (f && localStorageService.get(toStateName) != null) {
     event.preventDefault();
     var savedToParams = localStorageService.get(toStateName); //retrieving toParams from local storage
     localStorageService.remove(toStateName);
     for (var k in toState.params) {
       toParams[k] = savedToParams[k]; //update only the params {} not url params
     }
     $state.transitionTo(toState,toParams);
   } else {
     var toSave = {};
     for (var k in toState.params) {
       toSave[k] = toParams[k]; //save only the params {} not url params
     }
     localStorageService.set(toStateName,toSave);
   }
  });

});

Gist

我尝试使用localStorageService来“缓存”状态转换之间的参数.

当从状态A进入状态B时,我删除先前为A存储的参数.

然后我检查发送到B的params是否与B的状态定义中的params匹配,如果它们匹配,我从localStorage加载params,因为这意味着用户已经点击刷新并且params得到了重启.

我在几个案例中测试了这个代码,但它仍然没有经过全面测试.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐