带有递归指令的 ng-if 不能按预期工作答案

【问题标题】：ng-if with recursive directives does not work as expected带有递归指令的 ng-if 不能按预期工作
【发布时间】：2016-11-29 16:50:39
【问题描述】：

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

但还是有同样的问题。

Codepen of problem

【问题讨论】：

为什么需要'RecursionHelper'？如果你从 bob 和 dave 指令中删除编译函数，它将按照你想要的方式编译。
@Hoyen 在我的实际代码中，我有一个嵌套的数据结构，并且组件要复杂得多。所以我需要将一个组件嵌套在另一个组件中。如果你在没有助手的情况下这样做，Angular 将进入一个无限的摘要循环。助手阻止了这种情况。这个 CodePen 只是这个想法的一个简单例子。

标签： javascript angularjs recursion angular-ui-bootstrap-tab

【解决方案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>

【讨论】：