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

Question

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

Answer 1

J'ai également rencontré le même problème. Lorsque je travaillais récemment sur la page [Initiation] d'un événement marketing d'entreprise, l'initiation était divisée en 4 étapes. J'utilisais chaque étape comme une vue nommée, telle que : , via <p ng-if="step == 3" ui-view="step-3"></p> Pour déterminer quelle étape afficher, il existe une méthode dans le contrôleur pour régler ng-if comme suit : step

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

Cependant, lors de la modification d'une certaine étape, si vous actualisez le navigateur, vous reviendrez à la première étape. Au début, j'ai utilisé localStorage pour stocker le

statutstep

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

Cela enregistre le statut, mais il y a un problème. Si l'édition en cours atteint l'étape 3 et que je rouvre une fenêtre pour entrer dans l'édition à partir de la page de liste, elle passera directement à la troisième étape, en sautant les deux premières étapes.

Plus tard, j'ai également essayé
, mais le statut a été perdu dès que je l'ai actualisé, donc la solution finale était d'utiliser $cacheFactory. Vous pouvez lire l'article localstorage de la communauté array_huang pour comprendre les scénarios d'utilisation des deux. sessionStorage

Cette méthode n'est pas forcément la meilleure, mais elle peut être essayée comme alternative.

Answer 2

Référez-vous à l'usine de cache angulaire