angularjs引导选项卡在第一次动态后没有变化答案

【问题标题】：angularjs bootstrap tabs are not changing after first time dynamicallyangularjs引导选项卡在第一次动态后没有变化
【发布时间】：2019-01-14 16:32:55
【问题描述】：

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

所以，我想知道我做错了什么，以及为什么我只能在第一次导航时无法导航。

【问题讨论】：

你能发布你的 javascript 函数以编程方式更改标签吗？

标签： angularjs tabs angularjs-scope bootstrap-tabs

【解决方案1】：

首先，应将活动类应用于li 元素，而不是a 锚标记。此外，您已将所有divs 设置为在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

【讨论】：