AngularJS引导选项卡在第一次动态后不会更改

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"并触发调用相同函数的命令时，活动类保留在第一个选项卡上，并且不会以编程方式更改。

所以，我

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

Answer 1

首先，活动类应应用于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 来更改类。 jQuery完全在AngularJS的"摘要周期"之外运行。这意味着AngularJS无法控制或了解单击选项卡标题时发生的事情。这将导致一些意外行为。

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

下面是一个半工作的代码示例，说明了jQuery/AngularJS摘要循环问题： https://plnkr.co/edit/tBgvPjJ9HVvSj1SIrWhG?p=preview