Вкладки начальной загрузки 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>

Так что это работает для меня в первый раз, я могу программно перейти на 2-ю вкладку:

$ scope.activeTab = 'b';

Но когда я возвращаюсь вручную к вкладке "а" и запускаю команду, которая вызывает ту же функцию, активный класс остается на первой вкладке и не изменяется программно.

Итак, я хочу знать, что я делаю неправильно, и почему я могу ориентироваться только в первый раз, но не после этого.

Answer 1

Во-первых, активный класс должен быть применен к li элемент, а не a якорный тег. Кроме того, вы установили все свои divs, чтобы активировать, когда activeTab является "основным", а не соответствующими буквами:

<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/

Вот полу-рабочий пример вашего кода, который иллюстрирует проблемы с циклом дайджеста jQuery/AngularJS: https://plnkr.co/edit/tBgvPjJ9HVvSj1SIrWhG?p=preview