0

我在 ui-bootstrap 选项卡中有两个递归指令。出于性能原因,我只想在相应选项卡处于活动状态时实际加载指令。所以我在指令上使用 ng-if ,如下所示:

<dave ng-if="activeTab === 0"></dave>
...
<bob ng-if="activeTab= === 1"></bob>

现在,如果您转到 Tab 0,您会看到“dave”。然后转到选项卡 1,您会看到“鲍勃”。返回选项卡 0,您仍然可以看到“bob”。如果我删除 ng-if 一切都按预期工作:dave,bob,dave。

我需要能够仅在选项卡处于活动状态时呈现指令。我曾尝试将指令放在一个 div 中,并在其上使用 ng-if,如下所示:

<div ng-if="activeTab === 0"><dave></dave></div>

但仍然有同样的问题。

问题的代码

4

1 回答 1

0

通过执行以下操作,我能够正确地来回切换标签:

<div class="container" ng-app="app">
  <uib-tabset active=activeTab>
    <uib-tab index=0>
      <uib-tab-heading>Tab One</uib-tab-heading>
      <dave ng-if="active === index" recurse="true"></dave>
    </uib-tab>
    <uib-tab index=1>
      <uib-tab-heading>Tab Two</uib-tab-heading>
      <bob ng-if="active === index" recurse="true"></bob>
    </uib-tab>
  </uib-tabset>
</div>
于 2016-11-29T17:07:31.780 回答