How do I have multiple ionic views? - I've tried a variety of things to get it to work, but all failed...
Here are the relevant parts of my Angular Ionic app:
<body ng-app="ionic_appname">
<ion-nav-view></ion-nav-view>
<ion-nav-view name="errorsView" title="Errors"></ion-nav-view>
.config(
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('errors', {
views: {
errorsView: {
templateUrl: 'main/templates/errors.html'
}
}
})
.state('home', {
url: '/',
templateUrl: 'main/templates/home.html',
})
}
<h3>Errors ahoy</h3>
<h3>Tadaima</h3>
However the rendered output is just:
<body ng-app="ionic_appname" class="grade-a platform-browser platform-win32 platform-ready">
<ion-nav-view class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">
<ion-view view-title="Home" class="pane" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
<h3>Tadaima</h3>
</ion-view>
</ion-nav-view>
<ion-nav-view name="errorsView" title="Errors" class="view-container" nav-view-transition="ios"></ion-nav-view>
Have you already seen this Plunker?
http://plnkr.co/edit/UkXhXK?p=preview
It uses a "nested-views" approach which probably you could adopt in your project. For example:
.state('home', {
url: '/',
// loaded into ui-view of parent's template
views:{
'homePage': {
templateUrl: 'main/templates/home.html',
controller: 'HomeController'
},
'errorPage': {
templateUrl: 'main/templates/errors.html',
controller: 'ErrorController'
}
},
onEnter: function(){
console.log("enter home");
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.