如何在角JS刷新时设置引导活动选项卡

Question

我创建的选项卡如下：

 <tabset class="content-tabset no-margin">
<tab ng-repeat="t in t.values" heading="{{t.name}}" active="t.active">
  //other stuff
</tab>
</tabset>

现在，在其他内容中，我也有按钮，当单击更新行和刷新该部分时。当刷新发生时，它也会重置我当前正在使用的选项卡。因此，如果我是选项卡2并单击按钮，面板将刷新，然后返回到选项卡1。如何防止这种情况发生？

Answer 1

使用localStorage。在选择选项卡上设置它。要获得当前选项卡的活动状态的布尔值，请使用ng-init。

<tabset class="content-tabset no-margin">
  <tab 
    ng-repeat="t in t.values" 
    heading="{{t.name}}" 
    ng-init="isActive = isActiveTab(t.name, $index)"
    active="isActive"
    select="setActiveTab(t.name)">
    //other stuff
  </tab>
</tabset>

在你的控制器里

$scope.setActiveTab = function( activeTab ){
    localStorage.setItem("activeTab", activeTab);
};

$scope.getActiveTab = function(){
    return localStorage.getItem("activeTab");
};

$scope.isActiveTab = function( tabName, index ){
    var activeTab = $scope.getActiveTab();
    return ( activeTab === tabName || ( activeTab === null && $index === 0 ) );
};

注意:由于您的t没有标签的唯一ID，所以名称应该是唯一的，才能正确地检测活动选项卡。

参见示例JSFiddle。

Answer 2

无论何时刷新，局部变量/作用域变量都会超出作用域。因此，解决这一问题的方法是使用JavaScript的会话存储/本地存储。

一旦关闭浏览器，会话存储将超出范围，而本地存储将持久化值直到窗口和浏览器生存期。

内部控制器：

$scope.selTab = sessionStorage.tabName; //On refresh it will fetch value from session storage

$scope.onClickTab = function(tabName){ //On click it will set the sessionStorage
    $scope.selTab = tabName;
    sessionStorage.tabName = tabName;
}

HTML中的必须引用控制器

<ul class="nav nav-pills col-md-12 col-sm-12 col-xs-12{{active}}">
  <li ng-class ="{active:selTab=='tab1'}"><a href="#/tab1" ng-click="onClickTab('tab1')">Tab3</a></li>
  <li ng-class ="{active:selTab=='tab3'}"><a href="#/tab3" ng-click="onClickTab('tab3')">Tab3</a></li>
</ul>

Answer 3

您可以使用这个包ui-router-tabs。按照链接https://github.com/rpocklin/ui-router-tabs。简单易用，完成工作。