Hide ion-tabs

Hi,

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

Regards,

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