angualr-ui tabs 刷新后返回初始值

黑化冻鱼
  • 3
新手上路,请多包涵

RT,使用angular-ui里的tabs做选项卡切换的时候,不会记录当前选项卡选定状态,当有人手贱按刷新的时候,就会返回初始值。如何记录当前选项卡选定状态?

回复
阅读 2.9k
2 个回答

我也碰到过同样的问题,最近在做公司营销活动【发起】页面时,发起分为4个步骤,我将每一步作为一个命名视图,比如:<div ng-if="step == 3" ui-view="step-3"></div>, 通过ng-if来确定显示第几步, 然后在控制器中有一个方法来设置step,方法如下:

$scope.$on('changeStep', function(e, data) {
   $scope.step = data;
});

但是,当编辑到其中某一步时,如果刷新浏览器就会回到第1步状态。一开始我是用localStorage来存储step状态

$scope.step = $localStorage.step ? $localStorage.step : '1';
$scope.$on('changeStep', function(e, data) {
   $scope.step = data;
   $localStorage.step = data;
});
// 不在发起页面时清除数据
$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  if (toState.name != 'app.xx.new' || toState.name != 'app.xx.edit' || toState.name != 'app.xx.view') {
    delete $localStorage.step;
  }
})

这样就可以保存状态了,但是有一个问题是,如果当前编辑到第3步,我又重新开一个窗口从列表页面进入编辑,会直进入第三步,跳过了前二步。
后来我也试过$cacheFactory, 一刷新状态就丢失了,所以最后的解决办法是使用sessionStorage。可以看看社区array_huang的文章localstorage 必知必会来了解二者的使用场景。

这种方式不一定最优,但可以作为替代方案一试。

参考angular cache factory

宣传栏