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

我在ui-bootstrap选项卡中有两个递归指令。出于性能方面的原因，我只想在各个选项卡处于活动状态时实际加载指令。因此，我使用ng-if指令如下：带递归指令的ng-if不能按预期工作

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

现在，如果转到选项卡0，您会看到“dave”。然后转到Tab 1，看到“bob”。回到Tab 0，你仍然看到“bob”。如果我删除了ng，如果所有工作都按预期工作：dave，bob，dave。

我需要能够只在标签处于活动状态时呈现指令。我试图把一个div里面的指令，并使用NG-如果上像这样：

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

但仍然有同样的问题。

Codepen of problem

来源

2016-11-29 Justin Boyson

为什么你需要“RecursionHelper”？如果您从bob和dave指令中删除编译函数，它将按照您希望的方式进行编译。 – Hoyen

@Hoyen在我的实际代码中，我有一个嵌套的数据结构，组件要复杂得多。所以我需要在另一个组件中嵌套一个组件。如果你没有帮助者，Angular会输入一个无限的摘要循环。帮手阻止了这一点。这CodePen只是一个简单的例子。 –

我能得到的标签正确去这样做来回如下：

<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-29 17:07:31 Libby

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

回答

相关问题