用于场景:
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 = '';
}
}