Is it possible to have a hidden tab?

I found this old thread that discusses hidden tabs:

I’ve a similar scenario and would like to have a hidden tab, but the suggested hidden=true doesn’t seem to work anymore. Has this feature been removed? Any alternative solutions?

Hello,

With the last version of ionic “v1.0.0-beta.11-nightly-366” I have used the hidden attribute and it works. For example:

    <ion-tab title="{{meeting.description}}"
             hidden="{{meeting.id == 0}}"
             icon-on="icon ion-ios7-people"
             icon-off="icon ion-ios7-people-outline">
      <ion-content has-header="true">

Here’s a working version of that : http://codepen.io/calendee/pen/HvlAu

The hidden attribute worked for me in a browser, but running in the WP8 and IOS simulators, it wasn’t working.
I had to change the attribute to “x-hidden” for it to work.

@Calendee, the codepane is not working anymore : http://codepen.io/calendee/pen/HvlAu15

Also, I’m looking for an example to hide the tab from a different controller deep in the navigation hierarchy so I don’t have access to the tab element in the html. Thinking to access the dom element unless I find any better solution i.e any directive or delegate.

Thanks in advance for any tips.

  • Tushar

Here is what I have implemented which works fine for me :

  • HTML
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light" ng-class="{'tabs-item-hide': hideAppTabs}">
  • Controller

    myAppModule.controller(‘SettingsController’,[’$scope’, ‘$rootScope’, function($scope, $rootScope) {

      $scope.$on('$ionicView.beforeEnter', function() {
      	$rootScope.hideAppTabs = true;
      });
    
      $scope.$on('$ionicView.beforeLeave', function() {
      	$rootScope.hideAppTabs = false;
      });		
    

    }]);