angular.js - angualr-ui tabs 刷新後傳回初始值

Question

RT,使用angular-ui裡的tabs做選項卡切換的時候，不會記錄當前選項卡選定狀態，當有人手賤按刷新的時候，就會回傳初始值。如何記錄目前選項卡選定狀態？

Answer 1

我也碰到過同樣的問題，最近在做公司行銷活動【發起】頁面時，發起分為4個步驟，我將每一步作為一個命名視圖，例如：<p ng-if="step == 3" ui-view="step-3"></p>, 通过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 必知必會來了解二者的使用場景。

這種方式不一定最優，但可以作為替代方案一試。

Answer 2

參考angular cache factory