javascript - AngularJS 后退按钮默认打开到最后一个 ng-show

Question

我在一个页面上有三个按钮，根据您单击哪个按钮，会显示一组不同的选项卡。做出选择后，可以使用重置按钮清除您的选择。在这些选项卡中，用户能够进行选择，然后被带到结果页面。当前发生的情况是，如果用户通过浏览器单击返回，默认 View 是三个原始按钮，但我想要的是默认 View 是他们在发送结果之前所在的最后一个选项卡。有没有一种聪明的 Angular 方法来处理这个问题？

例子: http://plnkr.co/edit/2WZ12TKcHGXWmLhgD1vj

按钮:

<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>

标签:

    <tabset ng-show="tab == 1">
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">Home</a>
        </li>
        <li role="presentation"><a href="#">Profile</a>
        </li>
        <li role="presentation"><a href="#">Messages</a>
        </li>
      </ul>
    </tabset>


    <tabset ng-show="tab == 2">
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">Home</a>
        </li>
        <li role="presentation"><a href="#">Profile</a>
        </li>
        <li role="presentation"><a href="#">Messages</a>
        </li>
      </ul>
    </tabset>

    <tabset ng-show="tab == 3">
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">Home</a>
        </li>
        <li role="presentation"><a href="#">Profile</a>
        </li>
        <li role="presentation"><a href="#">Messages</a>
        </li>
      </ul>
    </tabset>
  </div>

Answer 1

Nicholas 是对的，但我最近在没有使用 ngRoute 的情况下做了类似的事情，所以我想要一种更简单的方法来完成它。除了您的原始问题之外，您可能还想考虑使用 ng-repeat 因为(根据您的示例)，这会为您节省大量代码。像这样:

<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>

就像 MichaelOryl 提到的那样，我还建议将一些逻辑移出 View 并移入 Controller 。我在 ng-repeat 中添加了上面调用的范围对象，以防你还不熟悉它。

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

最后，这是我对地点的看法。您会注意到我向 View 中的 hrefs 添加了唯一标识符，然后我使用它们在页面加载时选择正确的选项卡。这也是即兴的，所以没有 promise ，但它看起来像这样:

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

希望这对您有所帮助，如果您有任何问题，请告诉我。