Javascript AngularJS后退按钮默认打开到最后一次ng显示

我在一个页面上有三个按钮，根据您所单击的按钮，会显示一组不同的选项卡。选择后，可使用重置按钮清除选择。在这些选项卡中，用户可以进行选择，然后进入结果页面。当前发生的情况是，如果用户通过浏览器单击返回，默认视图是三个原始按钮，但我希望默认视图是它们在发送结果之前的最后一个选项卡。有没有一个聪明的方法来处理这个问题

例如：

按钮：

<div class="btn-group btn-group-justified" role="group" aria-label="Qualifications">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default" ng-click="tab = 1; showSelectorTabs=true; showSelectorButtons=true">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default" ng-click="tab = 2; showSelectorTabs=true; showSelectorButtons=true">Button 2</button>
  </div>
  <div class="btn-group" role="group">
    <button disabled="true" type="button" class="btn btn-default" ng-click="tab = 3; showSelectorTabs=true; showSelectorButtons=true">Button 3</button>
  </div>
</div>

按钮1
按钮2
按钮3

选项卡：

 > p>您可能需要考虑在cookie或浏览器本地存储中保存当前选定的选项卡。只有在适当的情况下（例如，当按下重置按钮时），才能擦除该值。我相信当用户点击页面刷新或后退按钮返回时，这将导致当前选择的视图或多或少成为默认视图

我成功地使用了应用程序默认设置和常规设置

否则，您可能只想使用泛型模块

您可能应该更改ngClicks以调用控制器内的函数，不过：

ng-click="setTab(3)"

然后，您将有类似这样的东西作为控制器，例如调用localStorageService。这是即兴代码-它可能不会运行。我只是想让你明白我的意思

app.controller('SecretCtrl', function ($scope, localStorageService) {
  $scope.tab = localStorageService('defaultTab');
  if ($scope.tab == null) { $scope.tab = 0; }

  $scope.setTab = function(tabNumber) {
    $scope.tab = tabNumber;
    $scope.showSelectorTabs=true;
    $scope.showSelectorButtons=true
    localStorageService.add('defaultTab', tabNumber);
  }
};

如果您使用的是ngRoute或类似的东西，并且实际触发了应用程序中的URL更改，那么这将起作用

使用$location.search（）将$scope.tab的状态推送到URL中，当您的页面首次加载时，读取该页面的状态，使其退出URL以初始化哪个选项卡处于活动状态

更改按钮以调用控制器上的函数：

<button type="button" class="btn btn-default" ng-click="showTab(1)">Button 1</button>

首次加载页面时，根据URL中的值初始化选项卡（如果可用），否则默认为选项卡1或您喜欢的任何内容：

$scope.tab = $location.search().tab != null ? $location.search().tab : 1;

Nicholas是对的，但我最近做了类似的事情，没有使用ngRoute，所以我想用一种更简单的方法来完成它。除了你原来的问题，你可能想考虑使用NG Read，因为（根据你的例子），这样可以节省很多代码。像这样：

<div class='btn-group' role='group' ng-repeat='button in buttons'>
    <button type='button' class='btn btn-default' ng-click='buttonSelected(button)'>Button {{ button }}</button>
</div>


<tabset ng-repeat='tabset in tabsets' ng-show='tabset.name == selectedTabset'>
    <ul>
        <li ng-repeat='tab in tabset.tabs' ng-class='{active: tab.active}'><a href='#{{ tabset.name }}_{{ tab.name }}'>{{ tab.name }}</a></li>
    </ul>
</tabset>

最后，这是我对这个位置的看法。您会注意到，我在视图中向HREF添加了唯一标识符，然后使用这些标识符在页面加载时选择适当的选项卡。这也是即兴的，所以没有承诺，但看起来像这样：

$scope.deepLink(url){
    if(url.indexOf('#') > -1){
        var hash = url.split('#')[1];
        var tabsetId = hash.split('_')[0];
        var tabId = hash.split('_')[1];
        var hashTabset = $filter('filter')($scope.tabsets, {name: tabsetId}, true);
        var hashTab = $filter('filter')(hashTabset, {name: tabId}, true);
        angular.forEach($scope.tabsets, function(tabset){
            tabset.active = false;
            angular.forEach(tabset.tabs, function(tab){ tab.active = false; });
        });
        hashTabset.active = true;
        hashTab.active = true;
    }
}

var url = $location.url();
$scope.deepLink(url);

希望这对您有所帮助，如果您有任何问题，请告诉我。
那么您想在单击时打开上一个URL吗？不，只需从结果页面返回此页面，默认打开选项卡，而不是按钮。
<div class='btn-group' role='group' ng-repeat='button in buttons'>
    <button type='button' class='btn btn-default' ng-click='buttonSelected(button)'>Button {{ button }}</button>
</div>


<tabset ng-repeat='tabset in tabsets' ng-show='tabset.name == selectedTabset'>
    <ul>
        <li ng-repeat='tab in tabset.tabs' ng-class='{active: tab.active}'><a href='#{{ tabset.name }}_{{ tab.name }}'>{{ tab.name }}</a></li>
    </ul>
</tabset>

$scope.buttons = ['One','Two','Three'];

$scope.tabsets = [
    {   name: 'One',
        active: false,
        tabs: [
            {name: 'Home', active: true, content: ''},
            {name: 'Profile', active: false, content: ''},
            {name: 'Messages', active: false, content: ''}]
    },{ // two more, same structure as first tabset }]

$scope.showSelectorButtons = true;
$scope.showSelectorTabs = false;
$scope.selectedTabset = 'None';
$scope.buttonSelected = function(selected){
    $scope.showSelectorButtons = false;
    $scope.showSelectorTabs = true;
    $selectedTabset = selected;
}

$scope.deepLink(url){
    if(url.indexOf('#') > -1){
        var hash = url.split('#')[1];
        var tabsetId = hash.split('_')[0];
        var tabId = hash.split('_')[1];
        var hashTabset = $filter('filter')($scope.tabsets, {name: tabsetId}, true);
        var hashTab = $filter('filter')(hashTabset, {name: tabId}, true);
        angular.forEach($scope.tabsets, function(tabset){
            tabset.active = false;
            angular.forEach(tabset.tabs, function(tab){ tab.active = false; });
        });
        hashTabset.active = true;
        hashTab.active = true;
    }
}

var url = $location.url();
$scope.deepLink(url);