我有一个 ui-router 结构:
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
})
.state('app.parent', {
url: '/parent',
views: {
'menuContent': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.next', {
url: '/next',
views : {
'next' : {
templateUrl: 'next.html'
}
}
})
parent.html 包含 ui-view 并链接到 app.parent.next
<ion-view view-title="Parent">
<ion-nav-buttons side="secondary">
<button class="button" ng-click="$state.go('app.parent.next')">
next »
</button>
</ion-nav-buttons>
<ion-content has-header="true">
<h1>Parent</h1>
<div ui-view></div>
</ion-content>
</ion-view>
它工作得很好，但是如果我直接在 app.parent.next 状态下启动应用程序，标题和模板不存在。
- http://michalstefanow.com/ionic.html#/app/parent - 工作得很好
- http://michalstefanow.com/ionic.html#/app/parent/next -
next嵌套 View 已加载，只是父级中定义的ion-nav-buttons不存在
(提供了托管版本的链接，因为要重现它必须以嵌套状态启动)
<!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 data-require="ionic@1.2.4" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css" />
<script data-require="ionic@1.2.4" data-semver="1.2.4" src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script>
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
})
.state('app.parent', {
url: '/parent',
views: {
'menuContent': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.next', {
url: '/next',
views : {
'next' : {
templateUrl: 'next.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/parent');
})
</script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="menu.html">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar style="background-color: transparent !important;">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/parent">
Parent
</ion-item>
<ion-item menu-close href="#/app/parent/next">
Directly into next
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script type="text/ng-template" id="parent.html">
<ion-view view-title="Parent">
<ion-nav-buttons side="secondary">
<button class="button" ui-sref='app.parent.next'>next »</button>
</ion-nav-buttons>
<ion-content has-header="true">
<h1>Parent</h1>
<h1>Parent</h1>
<h1>Parent</h1>
<div ui-view="next"></div>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="next.html">
<h1>Next</h1>
<h1>Next</h1>
<h1>Next</h1>
</script>
</body>
</html>我尝试过使用纯 ui-router 实现类似的方法:
- http://michalstefanow.com/ui-router.html#/app/parent
- http://michalstefanow.com/ui-router.html#/app/parent/child
<!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>UI Router</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script>
angular.module('starter', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'main.html',
})
.state('app.parent', {
url: '/parent',
views: {
'main': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.child', {
url: '/child',
templateUrl: 'child.html'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/parent');
});
</script>
</head>
<body ng-app="starter">
<div ui-view></div>
<script type="text/ng-template" id="main.html">
<h1>This is main.html</h1>
Below is:
<pre>ui-view="main"</pre>
<div ui-view="main"></div>
</script>
<script type="text/ng-template" id="parent.html">
<h1>Parent</h1>
<a ui-sref="app.parent.child">child »</a>
<div ui-view></div>
</script>
<script type="text/ng-template" id="child.html">
<h1>I am a child</h1>
</script>
</body>
</html>猜测猜测:由于缓存而特定的Ionic - Template does not update when using ui-router and ion-tabs ？
我到底想做什么？只是为了避免 XY 问题 - https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - 我想引导用户上传图像。需要执行几个步骤，用户将直接进入 app.upload.one 状态，而无需直接触摸 app.upload。 app.upload 将保留上传过程的当前状态，同时每个步骤都会添加描述、标签等...
最佳答案
我认为 ionic 是单页应用程序，因此只有一个父级(即根，如 tabs 或 menu)，其他都是子级，并且特别重要的是，其他人都是 sibling ，不可能是亲子关系。
简而言之，您只能使用一个点表示法，例如 app.child ，而不是像 app.child.grandchild 有两个点表示法。
关于javascript - Angular Ionic UI-Router - 如何确保在嵌套状态下启动应用程序时加载所有父 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38287084/