How can i hide tab bar for a particular view ?
i have nested views where i want to hide tab bar in one of the nestesd view !
I tried using ng-class= “{ ‘tabs-item-hide’: hideTabBar}” but since my tab bar is in parent scope and when i modify hideTabBar using my child scope it does not work !
Doesn’t seem like it will be possible right now
Not sure if this will be helpful, but I’ve delt with something similar to this, not exactly the same, but similar.
$scope.global = {};
$scope.global.showTabs = false;
$rootScope.$on("$locationChangeStart", function(event, next, current) {
if(next.indexOf("#/labs/results/details") > -1){
$scope.global.showTabs = true;
} else {
$scope.global.showTabs = false;
}
});
Did you try something like that in your parent’s controller, not the child controller?
i have the same requirement as you,
i have 3 “main” views where i want to show the tab and some subviews where i don’t want them so i gain more space on view.
There are multiple options to archive this.
first something like you mentioned using ng-hide=“hideTab” with a $rootScope variable.
you can then set in your view controller true or false. (not tested)
second what i did:
Structure:
so in short i run all Tab based Views in the tabs.html
and all other in main.html
the routing will look like this:
.config(($stateProvider, $urlRouterProvider) => {
console.log("**** app.config.routers");
$stateProvider
.state('main', {
url: "",
abstract: true,
templateUrl: "views/main.html"
})
.state('main.tabs', {
url: "/tab",
abstract: true,
views: {
'main-content': {
templateUrl: "views/tabs.html",
}
}
})
// --------- Tabs ---------
.state('main.tabs.homeTabOne', {
url: "/homeTabOne",
views: {
'home-tab': {
templateUrl: "views/homeTabOne/home.html",
controller: "homeTabOneController"
}
}
})
.state('main.tabs.homeTabTwo', {
url: "/homeTabTwo",
views: {
'about-tab': {
templateUrl: "views/homeTabTwo/home.html",
controller: "homeTabTwoController"
}
}
})
.state('main.tabs.homeTabThree', {
url: "/homeTabThree",
views: {
'contact-tab': {
templateUrl: "views/homeTabThree/homeTabThrees.html",
controller: 'homeTabThreesController'
}
}
})
// --------- homeTabOne ---------
.state('main.homeTabOneAdd', {
url: "/homeTabOne/add",
views: {
'main-content': {
templateUrl: "views/homeTabOne/add.html",
controller: "AddhomeTabOneController"
}
}
})
.state('main.homeTabOneChange', {
url: "/homeTabOne/change",
views: {
'main-content': {
templateUrl: "views/homeTabOne/change.html",
controller: 'homeTabOneChangeController'
}
}
})
// --------- homeTabTwo ---------
.state('main.homeTabTwoAdd', {
url: "/homeTabTwo/add",
views: {
'main-content': {
templateUrl: "views/homeTabTwo/add.html"
}
}
})
...
// --------- homeTabThree ---------
.state('main.homeTabThreeAbout', {
url: "/homeTabThree/about",
views: {
'main-content': {
templateUrl: "views/homeTabThree/about.html"
}
}
})
...
;
$urlRouterProvider.otherwise("/tab/homeTabOne");
})
main.html:
<ion-nav-bar class="bar-positive avant" animation="nav-title-slide-ios7" ></ion-nav-bar>
<ion-nav-view name="main-content"></ion-nav-view>
tabs.html
<ion-tabs class="tabs-icon-top" >
<ion-tab title="tabOne" icon="ion-one" href="#/tab/homeTabOne">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="TabTwo" icon="ion-two" href="#/tab/homeTabTwo" id="step2">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab titleTabThree" icon="ion-ios7-gear-outline" ui-sref="main.tabs.homeTabThree">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
one of the bad things with this method: routing and transitions do not really work :-/
Hi!
I had the same requirement and managed to find a pretty quick fix.
First off in your tabs file include the ng-class:
<ion-tabs class="tabs-icon-only tabs-feely" ng-class="$root.tabsHidden">
Second add this to your css file:
.tabs-hide .tabs {
display: none;
}
Third include this in the controller of every page where you want to hide the tab bar:
$scope.$root.tabsHidden = "tabs-hide";
Of course, when routing back from any page with hidden tab bar you need to remove this class to show it again.
Hope this helps, it sure did help me 
Hi,
I’m using your fix to hide my tab bar and It’s almost perfect. The problem is that the tab bar still exists (transparent). If I analize the CSS in runtime I can see that the “.has-tabs” attribute has this parameter: “bottom: 49px”.
How can I fix that?
Thank you.
Is there another way to hide the tabs?
.bar-footer.has-tabs {
bottom: 0px;
}
.has-footer.has-tabs {
bottom: 44px;
}
I have a footer and this works for now. I have to clean up the css.
Is this possible yet?
Not officially part of Ionic, but it is possible to build you’re own directive to handle it. Like I’ve done here.
Hi, I implemented it and it works great when I link from one page with tabs to another without. However when I link to page without tabs to another without tabs then it doesn’t hide that last pages’ tab bar.
Any tips to make sure its fully implemented?
Also this fairly common on iOS for ‘detail’ pages, any thoughts on it going into core?
Please provide an example.
Hi, I am using this
<!-- Info Tab -->
<ion-tab title="" icon-off="ion-android-more-vertical" icon-on="ion-android-more-vertical" href="#/tab/account">
<ion-nav-view name="tab-info"></ion-nav-view>
</ion-tab>
under info tab a template is loaded with list links, as this below
<ion-view view-title="Info">
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" href="#/tab/AboutUs">
<h2>About Us</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
When about us is clicked, I want to load aboutus without these tabs. about page is below
<ion-view hide-tab-bar view-title="About">
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<h3>Wedel / About</h3>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean euismod bibendum
laoreet. Proin gravida dolor sit amet lacus
accumsan et viverra justo commodo. Proin
sodales pulvinar tempor. Cum sociis natoque
penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam fermentum, nulla
luctus pharetra vulputate, felis tellus mollis orci
, sed rhoncus sapien nunc eget odio.</p>
</ion-content>
</ion-view>
i have included js, css and hide-tab-bar, But this does not work, I am new to this please help me out with this 
Take a look at this demo.
Thats what i’m after! Assuming this is only in the nightly release.
No, this is a custom directive I wrote.
I use your directive and it works perfect. Thank you!
Hi ! I used the code @mhartington wrote, is there any way to show the hidden tabs ?
<ion-view show-tab-bar >
</ion-view>
just like that ? Please Help me. Thanks
No, you would just not add the directive.