<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
<ion-tab title="首页" icon-off="ion-home" icon-on="ion-home" href="#/tab/dash">
<ion-nav-view name="dash"></ion-nav-view>
</ion-tab>
<ion-tab title="我的" icon-off="ion-person" icon-on="ion-person" href="#/tab/account">
<ion-nav-view name="account"></ion-nav-view>
</ion-tab>
</ion-tabs>
html中的重点是ng-class属性,指定$rootScope.hideTabs为true时隐藏Tabs.
.run(function ($rootScope) {
// 页面跳转事件拦截 $stateChangeStart | $stateChangeSuccess | $stateChangeError
// https://github.com/angular-ui/ui-router/wiki
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
if(toState.url == "/dash" || toState.url == "/account"){ // 这两个页面不隐藏Tabs
$rootScope.hideTabs = false;
} else { // 其他页面英藏Tabs
$rootScope.hideTabs = true;
}
});
})
类似于拦截器的实现可以在这里统一指定哪些页面不显示Tabs。