angularjs bootstrap 选项卡在第一次动态后没有更改

Question

<ul class="nav nav-tabs nav-tabs-simple" role="tablist">
  <li class="nav-item">
    <a href="#" ng-class="{active: activeTab =='a'}" data-toggle="tab" role="tab" data-target="#atab">A</a>
  </li>
  <li class="nav-item">
    <a href="#" ng-class="{active: activeTab =='b'}"  data-toggle="tab" role="tab" data-target="#btab">B</a>
  </li>
  <li class="nav-item">
    <a href="#" ng-class="{active: activeTab =='c'}" data-toggle="tab" role="tab" data-target="#ctab">C</a>
  </li>
</ul>

然后是实际的标签：

<div class="tab-pane" ng-class="{'active': activeTab =='main'}" id="atab">
</div>
<div class="tab-pane" ng-class="{'active': activeTab =='main'}" id="btab">
</div>
<div class="tab-pane" ng-class="{'active': activeTab =='main'}" id="ctab">
</div>

所以这是第一次为我工作，我能够以编程方式切换到第二个选项卡：

$scope.activeTab = 'b';

但是当我手动返回选项卡 'a' 并触发调用相同函数的命令时，活动 class 保留在第一个选项卡上并且不会以编程方式更改。

所以，我想知道我做错了什么，以及为什么我只能第一次导航但之后就不能导航了。

Answer 1

首先，活动 class 应该应用于 li 元素，而不是 a 锚标记。此外，您已将所有 div 设置为在 activeTab 为 "main" 时激活，而不是相应的字母：

<li class="nav-item" ng-class="{active: activeTab =='a'}">
  <a href="#" data-toggle="tab" role="tab" data-target="#atab">A</a>
</li>

<div class="tab-pane" ng-class="{'active': activeTab =='a'}" id="atab">
</div>
<div class="tab-pane" ng-class="{'active': activeTab =='b'}" id="btab">
</div>
<div class="tab-pane" ng-class="{'active': activeTab =='c'}" id="ctab">
</div>

其次，普通Bootstrap的选项卡功能使用jQuery更改classes。 jQuery 完全在 AngularJS 的 "digest cycle" 之外运行。这意味着 AngularJS 无法控制或了解当您单击选项卡 headers 时发生的事情。这将导致一些意外行为。

这就是创建此库以充分利用 Bootstrap 和 AngularJS 集成的原因：https://angular-ui.github.io/bootstrap/#!#tabs

这是您的代码的 semi-working 示例，它说明了 jQuery/AngularJS 摘要循环问题：https://plnkr.co/edit/tBgvPjJ9HVvSj1SIrWhG?p=preview

angularjs bootstrap 选项卡在第一次动态后没有更改

angularjs bootstrap tabs are not changing after first time dynamically

angularjs

tabs

angularjs-scope

bootstrap-tabs