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

第一次动态后，angularjs引导选项卡不会更改

1 个答案: