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

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

0 голосов
/ 14 января 2019 
<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';

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

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

1 Ответ

0 голосов
/ 15 января 2019

Во-первых, активный класс должен применяться к элементу li, а НЕ к тегу привязки a. Кроме того, вы установили все свои div s для активации, когда 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: https://plnkr.co/edit/tBgvPjJ9HVvSj1SIrWhG?p=preview

...