Вкладки начальной загрузки angularjs не меняются после первого раза динамически

<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 = 'б';

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

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


tabs angularjs bootstrap-tabs angularjs-scope
person Laziale    schedule 14.01.2019    source источник
comment
Можете ли вы опубликовать свою функцию javascript для программного изменения вкладок?   -  person Srdjan    schedule 14.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, активный класс должен применяться к элементу li, а НЕ к тегу привязки a. Кроме того, вы установили, что все ваши div активируются, когда 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/#!#tabs

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

person Pop-A-Stash    schedule 14.01.2019