1

ページにいくつかのタブを追加するために Angular-Foundation を使用しています。一部のタブには条件付きの ng-if があり、一部のタブにはありません。他のタブを最初にレンダリングしたいのに、ng-if のないタブが最初にレンダリングされ、デフォルトの表示になるようです。

また、条件が変わったときにコンテンツが常に正しいタブに変わるとは限りません。

javascript を使用してタブをレンダリングしようとしましたが、残念ながらビューに Jade を使用しており、コンテンツはテンプレートのインクルードであり、javascript では適切にレンダリングされません。

最初のタブセットの例。ng-if が式を評価している間、コンテンツはデフォルトで 3 番目のタブになります。

<tabset type="navType">
  <tab heading="First Tab" ng-if="!hideTab">First Content</tab>
  <tab heading="Second Tab" ng-if="hideTab">Second Content</tab>
  <tab heading="Third Tab">Third Content</tab>
</tabset>

別のタブセット。3 番目のタブのハックにより、1 番目または 2 番目のタブとコンテンツが最初に表示されますが、hideTab が切り替えられると、デフォルトで 3 番目のタブが再び表示されます。

<tabset type="navType">
  <tab heading="First Tab" ng-if="hideTab">First Content</tab>
  <tab heading="Second Tab" ng-if="!hideTab">Second Content</tab>
  <tab heading="Third Tab" ng-if="!hideTab || hideTab">Third Content</tab>
</tabset>

タブの使い方が間違っているのでしょうか？

ここでプランカーを作成しました: http://plnkr.co/edit/m1mxgo1Q872AnKaOJ5fe?p=preview

4

1 に答える 1

1

あなたのplnkrをフォークしました

hideTab ブール値をオブジェクトにラップする必要があります。tabset ディレクティブは新しいスコープを作成します。あなたの例では、3 つのタブセットすべてに対して、ディレクティブ レベルで 3 つの hideTab ブール値が作成されます。したがって、このブール値をすべてのディレクティブと共有したい場合は、オブジェクトでラップする必要があります。

angular.module('tabset').controller('tabsetController', function ($scope) {
 $scope.wrapper = {};
 $scope.wrapper.hideTab = false;  

});
于 2014-12-31T07:40:55.803 に答える