ionic中隐藏tabs(tabs-item-hide)(首页显示tab，其他页面不显示)

我之前看到之前的同志用指令.directive连接ionic封装了“ 'tabs-item-hide'”这个类（属性），灰常受用，但是在我做项目的时候，用原来的代码，路由去到另外一个页面，tab会弹出来（$scope.$on('$destroy',function(){
$rootScope.hideTabs = ' '; }) 这个方法在作怪），但是去掉这个方法后，发现全部页面都已经没有tab了

，实际上我相信绝大部分的APP的首页都是需要tab的，其他页面可以没有，下面是我的解决办法，分享给他家：

一 . 原来代码：

1.tabs页面

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

...

</ion-tabs>

2.跳转后页面

<ion-view hide-tabs>

..

</ion-view>

3. 指令

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

return {

restrict:'AE',

link:function($scope){

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

$scope.$on('$destroy',function(){

$rootScope.hideTabs = ' ';

})

}

}

}

二.修改后代码：

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. 指令

var app = angular.module("uniApp", ["ionic"]);

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

return {

restrict:'AE',

link:function($scope){

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

//删除这里

/*$scope.$on('$destroy',function(){

$rootScope.hideTabs = ' ';

})*/

}

})

//定义显示tab的showTabs指令

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

return {

restrict: 'AE',

link: function($scope) {

$rootScope.hideTabs = '';

}

}

})

这样就可以达到目的了，有什么问题可以评价追问