使用AngularJS和Bootstrap垂直嵌套选项卡加载内容，并使用Ajax。

Question

我使用angularjs和bootstarp创建了动态选项卡，它运作良好。我也尝试创建一个选项卡下的子选项卡，同样也运行得很好。 现在我想切换到主选项卡，然后返回到子选项卡，但它总是打开主选项卡而不是子选项卡。 我需要子选项卡处于活动状态，如何解决这个问题？ 我的代码在哪里出错了？

我的代码

 <uib-tabset vertical="true" class="tabs-left">
    <uib-tab ng-repeat="tab in menuList" select="getContent(tab.menuid)" active="tab.active">
      <tab-heading>
        <i class="fa {{tab.Icon}}"> </i> &nbsp{{tab.Name}}     
        <uib-tab ng-repeat="submenu in tab.submenu" select="getSubContent(tab.menuid, submenu.menuid)" active="submenu.active">
          <tab-heading>
            <i class="fa {{submenu.Icon}}"> </i> &nbsp{{submenu.Name}} 

            <i class="glyphicon glyphicon-remove" ng-click="removeSubTab(tab, submenu.menuid)"></i>
          </tab-heading>
          <div class="col-xs-10" class="tab-content">
            <div ng-hide="!submenu.isLoaded">
              <div bind-unsafe-html="submenu.content"></div>
            </div>
            <div ng-hide="submenu.isLoaded"><h3>Loading...</h3></div>                 
          </div>
        </uib-tab>
      </tab-heading>
      <div class="col-xs-10" class="tab-content">
        <div ng-hide="!tab.isLoaded">
          <div bind-unsafe-html="tab.content"></div>
        </div>
        <div ng-hide="tab.isLoaded"><h3>Loading...</h3></div>            
      </div>
    </uib-tab>
  </uib-tabset>

当前图片

我期望的是

- RSK

---

首先，您没有使用jQuery或jQuery选项卡，因此可以删除这些标签。其次，您不需要twitter-bootstrap-3标签，因为使用angular-ui-bootstrap选项卡时已经包含了Bootstrap。使用太多标签会导致其他用户在搜索时感到混乱。 - icfantv

Answer 1

首先，创建一个最小化的工作示例（plunker），以展示确切的问题，这将极大地帮助我们协助您。

其次，您正在<tab-heading>元素中嵌套标签页，这几乎肯定不是您想要的。

- icfantv

---

谢谢，我的问题已经解决了。我在最后添加了动态选项卡，并将其移动到主选项卡下方，现在它按照我预期的方式工作。 - RSK