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

Question

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

Answer 1

I have also encountered the same problem. When I was working on the [Initiation] page of a company's marketing event recently, the initiation was divided into 4 steps. I used each step as a named view, such as: <p ng-if="step == 3" ui-view="step-3"></p>, 通过ng-if来确定显示第几步， 然后在控制器中有一个方法来设置step. The method is as follows:

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

However, when editing to a certain step, if you refresh the browser, you will return to the first step. At first I used localStorage to store stepstatus

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

This way you can save the state, but there is a problem. If the current editing reaches step 3, and I reopen a window to enter editing from the list page, it will go directly to the third step, skipping the first two steps.
I also tried it later$cacheFactory, 一刷新状态就丢失了，所以最后的解决办法是使用sessionStorage. You can read the article localstorage by community array_huang to understand the usage scenarios of the two.

This method is not necessarily the best, but it can be tried as an alternative.

Answer 2

Refer to angular cache factory