【发布时间】：2015-09-09 01:31:16
【问题描述】：
我将应用的导航从侧边菜单更改为底部标签。 (tabs)。
它适用于父页面，但不显示任何子页面。
我遵循了入门应用提供的代码以及doc 提供的代码。
所以我做了什么：
tabs.html：
<ion-tabs class="tabs-icon-only tabs-color-calm">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" ui-sref="tab.users">
<ion-nav-view name="tab-users"></ion-nav-view>
</ion-tab>
<!-- Conversations Tab -->
<ion-tab title="Conversations" icon-off="ion-email" icon-on="ion-email" ui-sref="tab.conversations">
<ion-nav-view name="tab-conversations"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-person" icon-on="ion-person" ui-sref="tab.profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
tab-users.html（父）：
<ion-view view-title="List users">
<ion-content>
<div ng-repeat="user in users">
<a class="item item-avatar" ui-sref="tab.user({id:user.id})">
<h2>{{ user.firstname }} {{ user.lastname }}
</a>
</div>
</ion-content>
</ion-view>
user.html（tab-users 的子级，未显示的那个）：
<ion-view view-title="{{ user.firstname }} {{ user.lastname }}">
<ion-content>
{{ user.firstname }} {{ user.lastname }}
</ion-content>
</ion-view>
路线：
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
// Users (Home) :
.state('tab.users', {
url: '/users',
views: {
'tab-users': {
controller: 'NetworkController',
templateUrl: 'templates/tab-users.html'
}
}
})
.state('tab.user', {
url: '/user/:id',
view: {
'tab-users': {
controller: 'UserController',
templateUrl: 'templates/user.html'
}
}
})
// Conversations :
.state('tab.conversations', {
url: '/messages',
views: {
'tab-conversations': {
controller: 'ConversationsController',
templateUrl: 'templates/tab-conversations.html'
}
}
})
.state('tab.conversation-messages', {
url: '/messages/:id',
view: {
'tab-conversations':{
controller: 'MessagesController',
templateUrl: 'templates/conversation-messages.html'
}
}
})
// Profile :
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
controller: 'ProfileController',
templateUrl: 'templates/tab-profile.html'
}
}
})
.state('tab.profile-preferences', {
url: '/profile/:slug',
view: {
'tab-profile': {
controller: 'PreferenceController',
templateUrl: 'templates/profile-preferences.html'
}
}
})
// Others :
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
})
.state('register', {
url: '/register',
templateUrl: 'templates/register.html'
})
;
$urlRouterProvider.otherwise("/tab/users");
index.html：
<body ng-app="ionicApp" ng-controller="ApplicationController">
<div ng-show="error.status == true" class="bar bar-subheader bar-error">
<div class="error-bg"></div>
<div class="statusText"><strong>Error ({{ error.code }}) :</strong> {{ error.statusText }}</div>
<i class="icon ion-close-round" ng-click="error.status = false"></i>
</div>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button class="button-clear"><i class="ion-arrow-left-c"></i> Back</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-archive"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
更新：
请注意，ui-sref 正确生成了到 /tab/user/15 的路由
【问题讨论】：
标签： angularjs angular-ui-router ionic-framework angular-ui ionic