angulaire.js - Les onglets anualr-ui reviennent à la valeur initiale après l'actualisation

Question

RT, lors de l'utilisation des onglets dans angulaire-ui pour changer d'onglet, l'état actuel de la sélection des onglets ne sera pas enregistré. Lorsque quelqu'un appuie sur Actualiser, la valeur initiale sera renvoyée. Comment enregistrer l'état actuel de l'onglet sélectionné ?

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