Hide ion-tabs


How i can hide the ion-tabs of ion-nav-view?


I am hiding the tabs for a particular view (I think, been a while) by adding this directive ;

.directive('hideTabs', function($rootScope) {
  return {
  restrict: 'A',
  link: function($scope, $el) {
      $rootScope.hideTabs = 'tabs-item-hide';
      $scope.$on('$destroy', function() {
          $rootScope.hideTabs = '';

And then having my ion-view look something like this in my template;

<ion-view hide-tabs>

I’m gonna try. Thanks

don’t work toddhalfpenny

Ah sorry, I missed a piece. Where you define your tabs you also need to add the variable that will take insert the class.
Could you try this?

<ion-tabs class="tabs-icon-top tabs-default {{$root.hideTabs}}">

Here’s a CodePen http://codepen.io/toddhalfpenny/pen/bNyLYB - The Scientific Facts page is set to hide the tabs.

1 Like

toddhalfpenny when I use the back button the tabs appear again

Yup, sorry that is what I thought you were after… so a certain view does not have the tabs displayed, but the other views do… that way you still have navigation available.

Could you maybe explain the use case further?

The idea would be to have ion-tabs on the first page as in the example . In the following pages should not appear ion-tabs

In the example showed me that works index.html for fact.html . When I go to fact2.html and use the back button the ion-tabs appears again and should not appear.

Are you saying that when you got to “More facts” and then go back to “Scientific Facts” that the tabs re-appear? If so this is not what I’m seeing (see ani GIF)

Sorry if I’ve misunderstood.

Ok, but what I want is that when I click on “Scientific Facts” and “More Facts” the ion-tabs should not appear

can you solve this? pls

Oh, I’d not had to do that before… it seems that the unhiding of the tabs (as per the code below) is getting called after the hiding of the tabs in the new page.

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

I shall have to have a look to see how this can be handled… any ideas?

I’ve not been able to update the directive I’m using to cater for this issue… but if you have a controller available that’s being called then you could simply put this in it I think.

$rootScope.hideTabs = "";

thankyou for the solution

i am facing an issue with this,
this method is not working with a cyclic view load
ex: 1view.html=>2view.html=>3view.html=>1view.html (Tabs not appear at this view)

this method only workes when back button is clicked, how can we do it for cyclic view load?

have you found out the solution? I’m facing the same issue