含まれている要素内からAnguluiタブの状態へのアクセス

Question

ブートストラップテーマのタブを構築するためにAngulaiを使用しました：

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

.

は機能しますが、醜いようです。（これも1つ以上のタブセットでは機能しません）。

これらのスパン内からタブの状態にアクセスするためのより良い方法はありますか？

現在のコード付きプランター： http://plnkr.co/edit/id3asu4npcpnjo6gxuoo

Answer 1

これはng-repeat

で少し簡単に機能します。

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

.

fiddle