How do I hide the tabs in Ionic Framework

I know that this is answered already, but there's a more "angular way" of doing this that might be helpful. It's done by using a custom directive that you can apply on views that you don't want to show the bottom tab bar.

My solution to this on my app was:

1 - Use ng-hide binded to a rootScope variable on the tab bar, so I can hide/show it in any Controller/View of my app:

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

2 - Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed/dismissed:

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3 - Apply it to specific views that don't need the tab bar visible:

<ion-view title="New Entry Form" hide-tabs>
    <!-- view content -->
</ion-view>

ps: I think this can be improved even further avoiding the need of the ng-hide on the <ion-tabs> declaration, letting the directive do all the "dirty work".

Have a look at the Ionic tab documentation:

To hide the tabbar but still show the content, add the "tabs-item-hide" class.

So you would change this:

<div class="tabs">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

to this:

<div class="tabs tabs-item-hide">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

Daniel's answer was very close (thanks!) but didn't quite work in my case:

1. ng-hide hides the tab content as well as the tabs (for me, anyway)
2. I want to to conditionally hide the tabs by passing an expression to the directive.

So here's my modified template:

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

Directive (again based on Daniel's):

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.hideTabs, function(value){
                $rootScope.hideTabs = value;
            });

            scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

Usage:

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

Unfortunately the current answers have a lag before showing the tabs again. It seems the $scope gets $destroyed a bit late and when you go to a page that should have tabs, there's a lag before they're reshown. However, paul's link brought me to a better solution which has no lag:

app.controller('applicationController', function ($state, $rootScope) {  

    var hideTabsStates = ['tab.inbox-convo']; 

    $rootScope.$on('$ionicView.beforeEnter', function () {
        $rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name)
    });
});

<ion-tabs ng-class="{ 'tabs-item-hide': $root.hideTabs }">

Dunc's answer is very good, but does not work the best when it comes to Ionic's view caching.

The $destroy event is used which will set the $rootScope variable when the parent view is torn down.

However, as others have commented, this $destroy event happens too late when returning to a page that needs tabs. This causes a delayed jumpy behavior on page transitions. Additionally, the ion-content .has-tabs class does not get added until after the delay, so any content is covered by the tabs as well.

Instead we should reset on the Ionic event beforeLeave, to ensure the transition's digest cycle gets the variable change in time.

Same template:

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs --> 
</ion-tabs>

Directive (again based on Dunc's):

.directive('hideTabs', function($rootScope) {
  return {
      restrict: 'A',
      link: function(scope, element, attributes) {
          scope.$watch(attributes.hideTabs, function(value){
              $rootScope.hideTabs = value;
          });

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

Usage is the same -

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

For a bonus, if you're using SASS, you can get a nice popup transition for your tab bar if you add this to your .scss file:

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

If using vanilla CSS, replace $tabs-height with the height of your bar.

I used dotfrank's answer and it worked like a charm, except for when I went a few layers deep in a specific tab's view and then used the back button. Going back to a view that has the directive "hideTabs = 'true'" will actually have it set to "false" unless you wrap the $watch on hideTabs in the $ionicView.beforeEnter event.

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

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

Hope this helps! (also, this is my first answer... so if I'm completely missing something, then forgive my noobness).

Ng-if has been the only directive that has worked for me.

ng-if="$root.showList"

Hope it helps.

https://github.com/driftyco/ionic/issues/395 It appears that the tabs are kind tricky in Ionic. Check the link, it worked great for me