如何更简单在子级页面隐藏Ionic tabs

摘要: 通常我们需要在子级页面影藏Ionic自带的Tab栏

-------------2017.01.19更新线-----------------

实际的环境是文件路径保存的，还好小伙伴发现的这个问题，摸摸哒。

应该以#号后面的字段来判定是否属于子级页面

directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
// alert("执行了啊！！！！！！");
// var Urls = $el[0].ownerDocument.URL.split('#');
// var urlLen = Urls.length;
// var relativeUrl = Urls[urlLen - 1];
// alert($el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#')));
// console.log(relativeUrl.split('/').length);
//$el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#'))
if($el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#')).split('/').length > 3){
$rootScope.hideTabs = 'tabs-item-hide';
} else {
$rootScope.hideTabs = '';
}
$scope.$on('$destroy', function() {
if($el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#')).split('/').length > 3){
$rootScope.hideTabs = 'tabs-item-hide';
} else {
$rootScope.hideTabs = '';
}
});
}
};
})

-------------2017.01.14更新线------------------

只要是子级页面都隐藏tabs指令

.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
console.log(String($el["0"].baseURI).split('/').length);
console.log(String($el["0"].baseURI));
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
if(String($el["0"].baseURI).split('/').length - 1 > 5){
$rootScope.hideTabs = 'tabs-item-hide';
} else {
$rootScope.hideTabs = '';
}
});
}
};
});

官方有这么一段话

To hide the tabbar but still show the content, add the** tabs-item-hide** class. Also, whenever you are using tabs, remember to add the has-tabs CSS class to your ion-content directive.

可以看到官方推荐使用tabs-item-hide类来影藏tab，同时在一级页面的ion-content中除了加has-header以外还应该加上has-tabs才能完美解决首页显示不全的问题

具体做法如下
添加hideTabs指令

.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
$rootScope.hideTabs = '';
});
}
};
});

在tabs添加ng-class="$root.hideTabs"

<ion-tabs class=" tabs-icon-top tabs-stable tabs-color-positive" ng-class="$root.hideTabs">
<ion-tab  title="全部" icon-off="{{::icons[0].off}}" icon-on="{{::icons[0].on}}" href="{{::templateUrls[0].href}}" >
<ion-nav-view name="starter-home"></ion-nav-view>
</ion-tab>
.............
</ion-tabs>

在子页面添加hide-tabs属性

<ion-view title="比赛视频" hide-tabs>
<ion-content>
<game-detail liveid="liveid"></game-detail>
</ion-content>
</ion-view>