Zugriff auf den Status der AngularUI-Registerkarte über die darin enthaltenen Elemente

Question

Ich habe AngularUI verwendet, um Registerkarten im Bootstrap-Stil zu erstellen:

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

Sehen Sie sich diese an <span>ist mit {{ count }}?Ich möchte, dass sie gezeigt werden nur wenn die enthaltende Registerkarte ausgewählt (aktiv) ist.So etwas wäre perfekt:

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

Das funktioniert nicht, also habe ich Funktionen geschrieben $scope.setActiveTab Und $scope.isTabActive und jetzt sieht mein Code so aus:

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

Das funktioniert, sieht aber hässlich aus.(Ganz zu schweigen davon, dass dies nicht mit mehr als einem Tabset funktioniert).

Gibt es eine bessere Möglichkeit, innerhalb dieser Bereiche auf den Status der Registerkarte zuzugreifen?

Plunker mit meinem aktuellen Code: http://plnkr.co/edit/Id3aSU4NPcPNJO6gXuoo

Answer 1

Dies würde in einem etwas einfacher funktionieren ng-repeat

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

Geige