ng-ifと再帰的ディレクティブが期待どおりに動作しない

Question

ui-bootstrapタブの中に2つの再帰的ディレクティブがあります。パフォーマンス上の理由から、私は、それぞれのタブがアクティブなときに、ディレクティブを実際にロードしたいだけです。ですから、私はディレクティブにng-ifを使用しています。

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

ここでタブ0に行くと、「dave」が表示されます。次に、タブ1に移動し、「ボブ」と表示されます。タブ0に戻っても、まだ「ボブ」と表示されます。 ng-ifをすべて削除すると、dave、bob、daveのように動作します。

タブがアクティブなときにのみ指示文を表示できる必要があります。

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

しかし、まだ同じ問題を抱えている：私はdivの内側にディレクティブを置くと、そのようなことにNG-IFを使用して試してみました。

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>