How to hide the ion-tabs in specified page

I created an ionic app, just for mobile website, several pages. I wanna hide the ion-tabs in detail page.
My mobile site as below, how to hide the bottom tab in Friends page?

1 Like

In my app I have my tabs in their own abstract state with their own controller.

The <ion-tabs> directive has an ng-class="{'tabs-item-hide': shouldHide()}" on it, then in the controller I have the shouldHide() function:

$scope.shouldHide = function () {
        switch ($state.current.name) {
            case 'statename1':
                return true;
            case 'statename2':
                return true;
            default:
                return false;
        }
    }

Just make whichever state names you want to hide tabs return true :smile:

6 Likes

Nice solution @mbrookson

@mbrookson thanks so much for this. Took me a bit to get it implemented properly as I’m an angular AND Ionic noob.

For anybody wondering, the state config for the abstract state should have a controller attached as such:

.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html",
    controller: 'TabsController'
  })

and this should go in the “TabsController”:

$scope.shouldHide = function() {
      console.log($state.current.name);
        if ($state.current.name == "tab.submit") {
            return true;
        } else {
            return false;
        }
    };

as you can see, I went with an if-else statement instead of a switch statement. For some reason I couldn’t get the switch statement to work.

In this case one of the nested states in my abstract “tab” state was “submit”. As it turned out, I had to use “tab.submit” as the state name, not just “submit”. I don’t completely understand this, as the <ion-nav-view> directive name attribute was set to “submit”.

But it works!

1 Like

@gaege Very welcome!

The reason for the "tab.submit" state name is that the way the angular routing works is that states can be nested, so with the tabs all of it’s child states are named using the ‘dot notation’ convention.

If you use the state config then what you would need is something like this, where your ‘submit’ state is a child of your tabs:

.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html",
    controller: 'TabsController'
  })

.state('tab.submit', {
    url: "/submit",
    templateUrl: "templates/submit.html",
    controller: 'SubmitController'
  })

Not sure if I’ve explained that very well. Glad you got it working though! :slight_smile:

<!-- in your tabs.html add this ng-class -->
<ion-tabs ng-class="{'tabs-item-hide': hideTabs}">

</ion-tabs>

<!-- add 'hide-tabs'in your view where you want to hide the tabs -->
<ion-view hide-tabs> 

</ion-view>

// in your app.js add a directive
.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
})