0

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

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

タブ 0 に移動すると、「dave」が表示されます。次に、「bob」が表示されているタブ 1 に移動します。タブ 0 に戻ると、まだ "bob" が表示されています。ng-if を削除すると、すべてが期待どおりに機能します: dave、bob、dave。

タブがアクティブなときにのみディレクティブをレンダリングできるようにする必要があります。ディレクティブを div 内に配置し、次のように ng-if を使用してみました:

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

しかし、まだ同じ問題があります。

問題のコードペン

4

1 に答える 1

0

次のようにして、タブを適切に前後に移動させることができました。

<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-29T17:07:31.780 に答える