How do I hide the tabs in Ionic Framework-open source projects driftyco/ionic

Daniel Rochetti

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:

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:

ps: I think this can be improved even further avoiding the need of the ng-hide on the declaration, letting the directive do all the “dirty work”.