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


#1

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?


#2

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>

#3

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


How can I hide Tabs
#4

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.


#5

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 ?


#6

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


#7

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.


#8

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


#9

Answered question in the issue