Закладки Bootstrap не работают с маршрутами AngularJS. «Данные целевой» не работает слишком

Question

Я получил этот код на веб-сайте Bootswatch, он должен работать нормально:

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">Home</a></li> 
    <li class=""><a href="#profile" data-toggle="tab" aria-expanded="false">Profile</a></li> 
    <li class=""><a href="#other" data-toggle="tab" aria-expanded="false">Other</a></li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade active in" id="home"> 
    <p>Tab home!</p> 
    </div> 
    <div class="tab-pane fade" id="profile"> 
    <p>Tab Profile!</p> 
    </div> 
    <div class="tab-pane fade" id="other"> 
    <p>Tab Other!</p> 
    </div> 
</div> 

Но я использую AngularJS маршруты, поэтому href ссылки не являются я пытался заменить href на data-target, но он тоже не работает. Пожалуйста, помогите, и есть ли простой способ изменить класс Tab на active в активном состоянии? Спасибо.

Answer 1

Чтобы использовать компоненты Bootstrap, воспользуйтесь Angular-UI. Он предоставляет компоненты Bootstrap, такие как вкладки, которые были написаны специально для приложений AngularJS. Ознакомьтесь с разделом «Вкладки» по этой ссылке.