1

I'm using Angular-Foundation to add some tabs to a page. Some tabs have a conditional ng-if, and some do not. The tabs without ng-if seem to render first and become the default display, even though I want the other tab to render first.

Also, when the condition changes the content doesn't always change to the correct tab.

I tried using javascript to render the tabs, but unfortunately I'm using Jade for my views and the content is an include for a template, which the javascript won't render properly.

An example of the first tabset. The content will default to the Third tab while ng-if evaluates the expression.

<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>

Another tabset. The hack on the Third tab will let the First or Second tab and content be displayed first, but after hideTab is toggled it defaults to the Third tab again.

<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>

Maybe I am using tabs incorrectly?

I have created a plunker here: http://plnkr.co/edit/m1mxgo1Q872AnKaOJ5fe?p=preview

twinb
  • 166
  • 1
  • 2
  • 9
  • You need to set the appropriate tab's active property on click. See http://pineconellc.github.io/angular-foundation/ – JaKXz Dec 30 '14 at 21:39
  • @JaKXz the active property doesn't seem to be necessary based on the third example. Also it shouldn't have any effect on which tab is defaulted to active. The third tab is still the first to display. – twinb Dec 30 '14 at 22:08

1 Answers1

1

Forked your plnkr

you need to wrap you hideTab boolean to an object. tabset directive creates a new scope. In your example, for all three tabset it will create three hideTab boolean at directive level. So if you want to share this boolean with all directives, you need to wrap it in some object.

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

});
dhavalcengg
  • 4,678
  • 1
  • 17
  • 25
  • This has the same behavior, where the content from the third tab is loaded before the first or second tab. It may be an issue with the angular-foundation library, so I may just need to open a github issue. – twinb Dec 31 '14 at 23:14