Hi, im new with ionic and im trying to figure out how i can achieve multiple abstract views with ionic.
My app:
As you can see I have two tabs
From the side menu u can go to the child views of the abstract states info & orga.
heres my routing:
.state(‘info’, {
url: ‘/info’,
abstract: true,
templateUrl: ‘templates/parent.html’
})
.state(‘info.news’, {
url: ‘/news’,
nativeTransitions: {
“type”: “fade”,
“duration”: “300”
},
views: {
‘info-news’: {
templateUrl: ‘templates/info/info-news.html’,
controller: ‘HomeCtrl’
}
}
})
.state(‘info.news-detail’, {
url: ‘/news/detail’,
views: {
‘info-news’: {
templateUrl: ‘templates/info/info-news-detail.html’,
controller: ‘HomeCtrl’
}
}
})
.state(‘info.mensa’, {
url: ‘/mensa’,
nativeTransitions: {
“type”: “fade”,
“duration”: “300”
},
views: {
‘info-news’: {
templateUrl: ‘templates/info/info-mensa.html’,
controller: ‘HomeCtrl’
}
}
})
.state(‘orga’, {
url: ‘/orga’,
abstract: true,
templateUrl: ‘templates/parent.html’
})
.state(‘orga.timer’, {
url: ‘/timer’,
nativeTransitions: {
“type”: “fade”,
“duration”: “300”
},
views: {
‘orga-timer’: {
templateUrl: ‘templates/orga/orga-timer.html’,
controller: ‘OrgaCtrl’
}
}
})
.state(‘settings’, {
url: ‘/settings’,
nativeTransitions: {
“type”: “fade”,
“duration”: “300”
},
templateUrl: ‘templates/settings.html’,
controller: ‘SettingsCtrl’
})
.state(‘tab.mm’, {
url: ‘/mm’,
nativeTransitions: {
“type”: “fade”,
“duration”: “300”
},
views: {
‘tab-mm’: {
templateUrl: ‘templates/tab-math.html’,
controller: ‘MMCtrl’
}
}
});
My abstract views in parent.html
<ion-tab title="Organizer" icon-off="ion-ios-briefcase" icon-on="ion-ios-briefcase" href="#/orga/timer">
<ion-nav-view name="orga-timer"></ion-nav-view>
</ion-tab>
<!--Hidden Tabs-->
<ion-tab hidden="true">
<ion-nav-view name="info-mensa"></ion-nav-view>
</ion-tab>
The Problem is that I can go to the other states in info abstract state, but if i switch to orga abstract state regardless of whether button I used, there is a strange behaviour of the view showing the content not correctly.
As you can see the view is in not loaded correctly.
I´m using two abstract states which were using the same template file. In parent.html i define my Tabs and one hidden Tab.
To achieve that my hidden Tab is optically attached to the Info tab i tried to just bind info-mensa view to info-news view (also a child of Info abstract view).
In conclusion i think there is something wrong with my idea of using two abstract states with two tabs. But there must be a way to handle two different abstract states and let Ionic correctly show the views anyway.
Hope you understand me, sorry cause of my bad english.