ionic中导航条的隐藏

ionic中导航条的隐藏：

• 1.导读： 界面跳转的过程中跳到一些非首页的界面时，导航条需要被隐藏。

• 方法：

• 1.在路由中需要添加对应的隐藏和显示的方法，如下：

 .directive('showTabs', function ($rootScope) {
    return {
        restrict: 'A',
        link: function ($scope, $el) {
            $rootScope.hideTabs = false;
        }
    };
})
.directive('hideTabs', function ($rootScope) {
    return {
        restrict: 'A',
        link: function ($scope, $el) {
            $rootScope.hideTabs = true;
        }
    };
})

在所需要呈现导航条的界面的控制器中加入下列函数（表示每次跳回该界面都显示导航条）：

$scope.$on('$ionicView.enter', function () {
        // 显示 tabs
        $rootScope.hideTabs = false;
    });

2.在所需要隐藏导航条的界面对应的HTML中加入hide-tabs，具体添加位置如下例（即在view—title所在位置添加即可）：

<ion-view view-title="图书详情" hide-tabs >

记得在导航条所在的HTML头部中写入：ng-class=”{‘tabs-item-hide’: $root.hideTabs}”，具体如下：

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

题外话

：圆角样式设置（一段好用哒代码码码码…….）
只需要在你要设置圆角的css样式中加入：

-moz-border-radius: 5px;      /* Gecko browsers */
-webkit-border-radius: 5px;   /* Webkit browsers */
border-radius:5px;