请教ion-tabs嵌套的问题
刚接触ionic，碰到一个问题，想请教下各位。如上面图片所示，我需要的功能是：
1、下面一排tabs，点击tab1后在上方空白区域显示页1的内容；
2、点击tab2后在上方空白区域显示一排tabs，这排tabs要在顶部，点击tab2后默认选中funcTab1，显示功能页1的内容，此时下面的tabs也要在页面中显示；
3、点击funcTab2，在中间空白区域显示功能页2的内容，此时下面的tabs要同时在页面中显示。
我的代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/controlStyle.css" rel="stylesheet" />
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script src="lib/jquery-1.8.2.js"></script>
<script src="lib/common.js"></script>
<script src="lib/GridTable.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/utils.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>tabs.html<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="首页" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" class="fontsize" href="#/tab/home" >
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<ion-tab title="OA" icon-off="ion-ios-monitor-outline" icon-on="ion-ios-monitor" href="#/tab/oa">
<ion-nav-view name="tab-oa"></ion-nav-view>
</ion-tab>
<ion-tab title="查房" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/rounds">
<ion-nav-view name="tab-rounds"></ion-nav-view>
</ion-tab>
<ion-tab title="搜索" icon-off="ion-ios-search" icon-on="ion-ios-search-strong" href="#/tab/search">
<ion-nav-view name="tab-search"></ion-nav-view>
</ion-tab>
<ion-tab title="我" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/me">
<ion-nav-view name="tab-me"></ion-nav-view>
</ion-tab>
</ion-tabs>funcTabs.html
<ion-view>
<ion-tabs class="tabs-icon-left tabs-positive tabs-top">
<ion-tab title="诊断" icon-off="ion-ios-glasses-outline" icon-on="ion-ios-glasses" href="#/funcTab/diagnosis">
<ion-nav-view name="funcTab-diagnosis"></ion-nav-view>
</ion-tab>
<ion-tab title="医嘱" icon-off="ion-ios-book-outline" icon-on="ion-ios-book" href="#/funcTab/order">
<ion-nav-view name="funcTab-order"></ion-nav-view>
</ion-tab>
<ion-tab title="检查" icon-off="ion-ios-medkit-outline" icon-on="ion-ios-medkit" href="#/funcTab/check">
<ion-nav-view name="funcTab-check"></ion-nav-view>
</ion-tab>
<ion-tab title="检验" icon-off="ion-ios-flask-outline" icon-on="ion-ios-flask" href="#/funcTab/test">
<ion-nav-view name="funcTab-test"></ion-nav-view>
</ion-tab>
<ion-tab title="用血" icon-off="ion-ios-heart-outline" icon-on="ion-ios-heart" href="#/funcTab/blood">
<ion-nav-view name="funcTab-blood"></ion-nav-view>
</ion-tab>
<ion-tab title="文书" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/funcTab/document">
<ion-nav-view name="funcTab-document"></ion-nav-view>
</ion-tab>
</ion-tabs>app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
controller: "LoginCtrl",
templateUrl: "templates/login.html"
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.rounds', {
url: '/rounds',
views: {
'tab-rounds': {
templateUrl: 'templates/rounds/funcTabs.html',
controller: 'RoundsCtrl'
}
}
})
.state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
}
}
})
.state('tab.me', {
url: '/me',
views: {
'tab-me': {
templateUrl: 'templates/me/docInfo.html',
controller: 'MeCtrl'
}
}
})
.state('funcTab', {
url: '/funcTab',
abstract: true,
templateUrl: 'templates/rounds/funcTabs.html'
})
.state('funcTab.diagnosis', {
url: '/diagnosis',
views: {
'funcTab-diagnosis': {
templateUrl: 'templates/rounds/tabs/diagnosis.html',
controller: 'DiagnosisCtrl'
}
}
})
.state('funcTab.order', {
url: '/order',
views: {
'funcTab-order': {
templateUrl: 'templates/rounds/tabs/order.html',
controller: 'OrderCtrl'
}
}
})
.state('funcTab.check', {
url: '/check',
views: {
'funcTab-check': {
templateUrl: 'templates/rounds/tabs/check.html',
controller: 'CheckCtrl'
}
}
})
.state('funcTab.test', {
url: '/test',
views: {
'funcTab-test': {
templateUrl: 'templates/rounds/tabs/test.html',
controller: 'TestCtrl'
}
}
})
.state('funcTab.blood', {
url: '/blood',
views: {
'funcTab-blood': {
templateUrl: 'templates/rounds/tabs/blood.html',
controller: 'BloodCtrl'
}
}
})
.state('funcTab.document', {
url: '/document',
views: {
'funcTab-document': {
templateUrl: 'templates/rounds/tabs/document.html',
controller: 'DocumentCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/home');
});
我现在做到了点击tab2显示了上面的一排funcTabs并显示funcTab1的内容页，但是这个时候下面的tabs没有了。
不知道是ionic不支持还是我路由写错了（修改过几次路由，也没能实现）或者是别的什么原因。
望大神们不吝赐教，谢谢。
另外：我把index.html页面的<ion-nav-bar>删掉了，再给funcTabs.html页面的<ion-tabs>加上tabs-top样式后页面上部还是留下了一个ion-nav-bar高度的空白区域，虽然我现在通过自己设定样式解决了这个问题，但是不知道ionic原生能不能解决这个问题，比如通过设置或者添加样式什么的。
funcTabs.html的代码编辑错了，还有下面几行代码要加上去：
<ion-nav-view></ion-nav-view>
</ion-view>
完整代码是这样的：<ion-view>
<ion-tabs class="tabs-icon-left tabs-positive tabs-top">
<ion-tab title="诊断" icon-off="ion-ios-glasses-outline" icon-on="ion-ios-glasses" href="#/funcTab/diagnosis">
<ion-nav-view name="funcTab-diagnosis"></ion-nav-view>
</ion-tab>
<ion-tab title="医嘱" icon-off="ion-ios-book-outline" icon-on="ion-ios-book" href="#/funcTab/order">
<ion-nav-view name="funcTab-order"></ion-nav-view>
</ion-tab>
<ion-tab title="检查" icon-off="ion-ios-medkit-outline" icon-on="ion-ios-medkit" href="#/funcTab/check">
<ion-nav-view name="funcTab-check"></ion-nav-view>
</ion-tab>
<ion-tab title="检验" icon-off="ion-ios-flask-outline" icon-on="ion-ios-flask" href="#/funcTab/test">
<ion-nav-view name="funcTab-test"></ion-nav-view>
</ion-tab>
<ion-tab title="用血" icon-off="ion-ios-heart-outline" icon-on="ion-ios-heart" href="#/funcTab/blood">
<ion-nav-view name="funcTab-blood"></ion-nav-view>
</ion-tab>
<ion-tab title="文书" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/funcTab/document">
<ion-nav-view name="funcTab-document"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-view>
我已经弄好了 我也碰到同样的问题，请问楼主是怎么处理的呢 请问楼主怎么实现的呀，我也遇到了同样的问题，学生档不容易，求大神指教！
页:
[1]