隐藏底部导航栏（tabs）

用于场景：

ionic开发APP时，会遇到有些页面需要显示底部导航栏（如首页），而有些页面需要隐藏。在网上找了好多种大神大牛们贡献的方法，如下：

方法1：

（1）在<ion-tabs>标签里添加：ng-class="{'tabs-item-hide': $root.hideTabs}" ：

<ion-tabs class="tabs-icon-top tabs-stable tabs-color-assertive" ng-class="{'tabs-item-hide': $root.hideTabs}">

</ion-tabs>

（2）指令：

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'ECAM',
        link: function(scope, element, attributes) {
            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });
            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
})

（3）在你需要隐藏的页面<ion-view>里添加 ：hide-tabs="true 。不需要隐藏需要显示的页面就不用加了

<ion-view view-title="标题" hide-tabs="true"></ion-view>

方法2：

（1）tabs页面

<ion-tabs class="tabs-icon-top tabs-positie {{hideTabs}}{{showTabs}}>

tab1

tab2

.....

</ion-tabs>

（2）跳转后页面各种views

//需要隐藏的view

<ion-view hide-tabs>

..

</ion-view>

//需要显示的主页的view

<ion-view show-tabs>

..

</ion-view>

（3）指令

//定义隐藏tab的hideTabs指令

.directive('hideTabs',function($rootScope){

    return {

        restrict:'AE',

        link:function($scope){

            $rootScope.hideTabs = 'tabs-item-hide';

        }

    })

//定义显示tab的showTabs指令

.directive("showTabs", function($rootScope) {

return {

restrict: 'AE',

link: function($scope) {

$rootScope.hideTabs = '';

}
 }