似乎不可能导航到兄弟姐妹的孩子状态或祖先的孩子状态 .
我使用的解决方法是将所有状态放在同一级别，这允许我导航到我需要的任何状态（从推送通知导航到嵌套状态，从一个嵌套状态导航到另一个父级内的状态等等） . ..） .
该方法的问题是状态和控制器不继承任何代码，导致代码重复 . 此外，有些情况下导航只是简单地断开而离子导航后退按钮的行为不应该如此 .
TLTR: What structure must be used to have a fully navigable application (check out the pen), when you use tabs and nested states ?
这是描述问题的笔：http://codepen.io/ruslan-fidesio/pen/LkyAkm
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="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content>
<a ui-sref="app.tabs.themes.details">Go to Child : broken</a>
<a ui-sref="app.other">Go to Other : broken</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-positive">
<ion-tab title="home" ui-sref="app.tabs.home">
<ion-nav-view name="tabs-home"></ion-nav-view>
</ion-tab>
<ion-tab title="themes" ui-sref="app.tabs.themes.list">
<ion-nav-view name="tabs-themes"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="themes/abstract.html" type="text/ng-template">
<div class="bar bar-subheader bar-dark" sticky>
Themes subheader
</div>
<ion-nav-view></ion-nav-view>
</script>
<script id="themes/list.html" type="text/ng-template">
<ion-view view-title="Themes">
<ion-content class="has-subheader">
<p>Parent View</p>
<a ui-sref="app.tabs.themes.details">Go to Child : OK !</a>
</ion-content>
</ion-view>
</script>
<script id="themes/details.html" type="text/ng-template">
<ion-view view-title="Theme X">
<ion-content class="has-subheader">
Child View
</ion-content>
</ion-view>
</script>
<script id="other.html" type="text/ng-template">
<ion-view view-title="Other">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
Other View
<a ui-sref="app.tabs.themes.details">Go to Child : broken</a>
</ion-content>
</ion-view>
</script>
</body>
</html>
JS：
var app = angular.module(
'app', [
'ionic'
]
);
app.run(
function($ionicPlatform, $rootScope) {
$ionicPlatform.ready(
function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
}
);
}
);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
template: '<ion-nav-view></ion-nav-view>'
})
.state('app.tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'tabs.html'
})
.state('app.tabs.home', {
url: '/home',
views: {
'tabs-home': {
templateUrl: 'home.html'
}
}
})
.state('app.other', {
url: '/other',
templateUrl: 'other.html'
})
.state('app.tabs.themes', {
url: '/themes',
abstract: true,
views: {
'tabs-themes': {
templateUrl: 'themes/abstract.html'
}
}
})
.state('app.tabs.themes.list', {
url: '/list',
templateUrl: 'themes/list.html'
})
.state('app.tabs.themes.details', {
url: '/details',
templateUrl: 'themes/details.html'
});
$urlRouterProvider.otherwise('/app/tabs/home');
});
app.config(
['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.navBar.alignTitle('center');
}]);
1 回答
经过一些研究，它与IonTabs和分离的离子导航视图有关 . （看看这张图片：http://ionicframework.com/img/diagrams/tabs-nav-stack.png）
在这种情况下，最好只使用一个ion-nav-view替换自定义"tabs"实现的选项卡，如下所示：http://codepen.io/ruslan-fidesio/pen/RRgpjL
HTML：
JS：