Ich habe eine ui-router Struktur:Angular Ionic UI-Router - Wie kann sichergestellt werden, dass alle übergeordneten Ansichten geladen werden, wenn die App in einem verschachtelten Zustand gestartet wird?
.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 enthält ui-view und Link zur 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>
Es funktioniert gut, aber wenn ich die App direkt in app.parent.next Zustand beginnen die Kopf- und Vorlage sind nicht dort.
- http://michalstefanow.com/ionic.html#/app/parent - funktioniert gut
- http://michalstefanow.com/ionic.html#/app/parent/next -
nextNested-Ansicht geladen ist, es ist nur dieion-nav-buttonsin der übergeordneten definiert sind nicht dazu da
(zur Verfügung gestellt Link auf gehostete Version, weil zu reproduzieren es ist wichtig, in einem verschachtelten Zustand zu starten)
<!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="[email protected]" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css" />
<script data-require="[email protected]" 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>Ich habe versucht, etwas Ähnliches mit reiner ui-router Umsetzung:
- 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>Spekulation guesstimate: etwas Ionic spezifisch wegen Caching - Template does not update when using ui-router and ion-tabs?
Was versuche ich wirklich? Nur um XY-Problem zu vermeiden - https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - Ich möchte einen Benutzer führen, um ein Bild hochzuladen. Es wird ein paar Schritte geben und der Benutzer wird direkt im Zustand app.upload.one landen, ohne app.upload direkt zu berühren. app.upload wird den aktuellen Status des Upload-Prozesses beibehalten, während jeder der Schritte Beschreibung, Tags usw. hinzufügen wird.
Warum zwingen Sie die App nicht immer im app.parent-Zustand zu starten? $ location.path ("/ parent"); in Ihrem Laufblock zum Beispiel. – user3791775
@ user3791775 - nicht erzwingen, dass meine App in '' 'app.parent''' startet, weil es in' '' app.grandfather''' oder vielleicht sogar '' 'app.santaclaus''' starten kann –