Multiple Abstract Views with tabs in one app


#1

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.

:slightly_smiling:
Hope you understand me, sorry cause of my bad english.


#2

Isnt there anybody who knows why i got this white blank spot in the navigation bar?

Might this be a Problem with the two abstract states, or the Ionic Framework?

Is there a way to have two abstract states?