Question

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

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

现在，如果你去Tab 0，你会看到“dave”。然后转到标签1，你会看到“bob”。回到标签0，你仍然看到“鲍勃”。如果我删除了ng-if all all按预期工作：dave，bob，dave。

我需要能够仅在选项卡处于活动状态时呈现指令。我已经尝试将指令放在div中并使用ng-if就像这样：

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

但仍有同样的问题。

Codepen of problem

Answer 1

通过执行以下操作，我能够让标签正确地来回移动：

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

带有递归指令的ng-if无法按预期工作

1 个答案: