帶遞歸指令的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不能按預期工作

回答

相關問題