포함된 요소 내에서 AngularUI 탭의 상태에 액세스

Question

저는 AngularUI를 사용하여 Bootstrap 테마 탭을 만들었습니다.

<tabset>
    <tab>
        <tab-heading>Javascript <span class="badge">{{ count }}</span></tab-heading>
    </tab>
    <tab>
        <tab-heading>Python <span class="badge">{{ count }}</span></tab-heading>
    </tab>
    <tab>
        <tab-heading>Ruby <span class="badge">{{ count }}</span></tab-heading>
    </tab>
</tabset>

저것들을 보아라 <span>와 함께 {{ count }}?나는 그것들이 보여졌으면 좋겠다. 오직 해당 탭이 선택된 경우(활성).다음과 같은 것이 완벽할 것입니다.

<span ng-show="tab.active" class="badge">{{ count }}</span>

작동하지 않아서 함수를 작성했습니다. $scope.setActiveTab 그리고 $scope.isTabActive 이제 내 코드는 다음과 같습니다.

<tab select="setActiveTab(0)">
    <tab-heading>Javascript <span ng-show="isTabActive(0)" class="badge">{{ count }}</span></tab-heading>
</tab>
<tab select="setActiveTab(1)">
    <tab-heading>Python <span ng-show="isTabActive(1)" class="badge">{{ count }}</span></tab-heading>
</tab>
<tab select="setActiveTab(2)">
    <tab-heading>Ruby <span ng-show="isTabActive(2)" class="badge">{{ count }}</span></tab-heading>
</tab>

이것은 작동하지만 보기 흉해 보입니다.(이것은 둘 이상의 탭세트에서는 작동하지 않습니다.)

해당 범위 내에서 탭 상태에 액세스하는 더 좋은 방법이 있습니까?

현재 코드를 사용한 Plunker: http://plnkr.co/edit/Id3aSU4NPcPNJO6gXuoo

Answer 1

이것은 조금 더 쉽게 작동할 것입니다. ng-repeat

<tab ng-repeat="tab in tabs" active="tab.active">
...
ng-show="tab.active" 

깡깡이