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

Question

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

Answer 1

Saya juga mengalami masalah yang sama Semasa saya bekerja di halaman [Permulaan] acara pemasaran syarikat baru-baru ini, permulaan itu dibahagikan kepada 4 langkah saya menggunakan setiap langkah sebagai paparan bernama, seperti: <p ng-if="step == 3" ui-view="step-3"></p>, melalui ng-if Untuk menentukan langkah yang hendak dipaparkan, terdapat kaedah dalam pengawal untuk menetapkan step seperti berikut:

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

Namun, apabila mengedit ke langkah tertentu, jika anda memuat semula penyemak imbas, anda akan kembali ke langkah pertama. Pada mulanya saya menggunakan localStorage untuk menyimpan 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;
  }
})

Ini menyimpan status, tetapi terdapat masalah Jika pengeditan semasa mencapai langkah 3, dan saya membuka semula tetingkap untuk memasuki pengeditan dari halaman senarai, ia akan pergi terus ke langkah ketiga, melangkau dua langkah pertama.
Kemudian saya juga mencuba $cacheFactory, tetapi statusnya hilang sebaik sahaja saya menyegarkannya, jadi penyelesaian terakhir adalah menggunakan sessionStorage. Anda boleh membaca artikel localstorage oleh array_huang komuniti untuk memahami senario penggunaan kedua-duanya.

Cara ini tidak semestinya terbaik, tetapi ia boleh dicuba sebagai alternatif.

Answer 2

Rujuk kilang cache sudut