Ng-show does not work on ion-tab in tabs seed project

ionic-v1
1

ng-show does not work on ion-tab in tabs seed project. I have taken the basic ionic tabs app and just added ng-show and ng-init to an ion-tab element like this:

<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account" ng-show="showThisTab" ng-init="showThisTab = false;">

I have changed the value of showThisTab and can see that class=“ng-hide” gets added and removed from the element as expected. Everything ok on Angular’s side. Actual app will not use ng-init.

I do see the anchor tag that the ion-tabs directive creates and if I manually add ng-hide to it I do get the desired behavior.

<a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" class="ng-hide tab-item tab-item-active" icon="icon ion-gear-b">

Bottom line, how do I show and hide tab icons in the tab bar ?

Warren

2

Ok, after digging through the code I found an attribute named “hidden” on the ion-tab directive which is also “hidden” from the documentation. I did this:

<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account" hidden="{{showAccountTab}}">

I now show and hide the tab by controlling the variable “showAccountTab” in my controller. it adds the class “tab-hidden” to the anchor element associated with that tab.

Can someone confirm that this is the proper way to show and hide a tab icon from a tab bar ? Is there a reason hidden was hidden ?

3

I’ve wondered this as well. It seems to work perfectly, it’s simply not documented.

4

Here is a codepen of how I am using hidden. I put example code in $rootScope for simplicity.