Show/hide ionic tab based on angular variable cause error in background

I have a tab like this:

<ion-tabs tabs-style='tabs-icon-top' tabs-type='tabs-default'>
  <!-- Pets Tab -->
  <ion-tab href='#/tab/pets' icon='icon ion-home' title='Pets'>
    <ion-nav-view name='pets-tab'></ion-nav-view>
  </ion-tab>
  <!-- Adopt Tab -->
  <span ng-show='user()'>
    <ion-tab href='#/tab/adopt' icon='icon ion-heart' title='Adopt'>
      <ion-nav-view name='adopt-tab'></ion-nav-view>
    </ion-tab>
    <ion-tab href='#/tab/about' icon='icon ion-search' title='About'>
      <ion-nav-view name='about-tab'></ion-nav-view>
    </ion-tab>
  </span>
  <!-- Sign In Tab -->
  <span ng-show='!user()'>
    <ion-tab href='#/tab/sign-in' icon='icon ion-person' title='Sign In'>
      <ion-nav-view name='sign-in-tab'></ion-nav-view>
    </ion-tab>
  </span>
</ion-tabs>

When I change my variable so that user() evaluated from an object to null or vice versal, an error happened in background:

TypeError: Cannot call method 'querySelectorAll' of undefined
at cancelChildAnimations (http://localhost:5000/lib/js/angular/angular-animate.js:878:22)
at Object.leave (http://localhost:5000/lib/js/angular/angular-animate.js:442:11)
at Object.ngIfWatchAction [as fn] (http://localhost:5000/lib/js/angular/angular.js:18503:24)
at Scope.$digest (http://localhost:5000/lib/js/angular/angular.js:11830:29)
at Scope.$apply (http://localhost:5000/lib/js/angular/angular.js:12083:24)
at HTMLAnchorElement.<anonymous> (http://localhost:5000/lib/js/ionic-angular.js:2851:15)
at http://localhost:5000/lib/js/angular/angular.js:2616:10
at forEach (http://localhost:5000/lib/js/angular/angular.js:310:20)
at HTMLAnchorElement.eventHandler (http://localhost:5000/lib/js/angular/angular.js:2615:5)
at Object.ionic.tapElement (http://localhost:5000/lib/js/ionic.js:2114:9) angular.js:9435

May be I did something wrong? My intention is to show/hide certain tab at one moment only. What’s the correct way to do so?

Can you give this a try instead. I put the ng-show on the tabs themselves.

<ion-tabs tabs-style='tabs-icon-top' tabs-type='tabs-default'>
  <!-- Pets Tab -->
  <ion-tab href='#/tab/pets' icon='icon ion-home' title='Pets'>
    <ion-nav-view name='pets-tab'></ion-nav-view>
  </ion-tab>
  <!-- Adopt Tab -->
    <ion-tab href='#/tab/adopt' icon='icon ion-heart' title='Adopt' ng-show='user()'>
      <ion-nav-view name='adopt-tab'></ion-nav-view>
    </ion-tab>
    <ion-tab href='#/tab/about' icon='icon ion-search' title='About'>
      <ion-nav-view name='about-tab'></ion-nav-view>
    </ion-tab>
  <!-- Sign In Tab -->
    <ion-tab href='#/tab/sign-in' icon='icon ion-person' title='Sign In' ng-show='!user()'>
      <ion-nav-view name='sign-in-tab'></ion-nav-view>
    </ion-tab>
</ion-tabs>

Thanks, but it doesn’t work. All tabs are showing now.

Here’s a quick sample of 3 tabs but only 2 showing: http://codepen.io/calendee/pen/bsEfy

If you need more in depth example, please fork and modify with your code.

I am not sure that I am using this right but here we go :

seems like ng-show isn’t working on ion-tab but works on the hypertext link ?

Thanks. So I need to write the html markup and not leverage the ionic syntax?

Actually, my example didn’t even work very well. The tab item on the bottom was indeed hidden. However, the content was missing. I’ve put together another attempt using <ion-tab> and <ng-if>. It correctly hides the tab:

Unfortunately, there is no way to toggle it’s state. Clicking the “Show Hotel” button should theoretically make it visible again. However, the controllers don’t have a public API for adding and removing them.

If you need this functionality, please open a feature request on GitHub.

Thanks. Just opened an issue on github: https://github.com/driftyco/ionic/issues/727

Answered question in the issue