从其包含的元素中访问 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" 

Fiddle