Hi,
I’m a beginner with Ionic and Angular and I have a problem with two combined tabs.
First tabs are at the bottom of the view and works well. The first tab of the bottom open a view containing two tabs at the top of the view. When I open the tab at the bottom, the view is black, but if I click on the second tab at the top and then click the first one, the content appears.
I think there is a problem with abstract state :
There is my app.js
.state('tab', {
url : "/tab",
abstract : true,
templateUrl: "templates/tabs.html"
})
.state('tab.suggests', {
url : "/suggests",
views: {
'tab-suggests': {
templateUrl: "templates/suggests.html"
}
}
})
.state('tab.notifications', {
url : "/notifications",
views: {
'tab-notifications': {
templateUrl: "templates/notifications.html"
}
}
})
.state('tab.profile', {
url : "/profile",
views: {
'tab-profile': {
templateUrl: "templates/profile.html"
}
}
})
.state('tab.line', {
url : "/line",
views: {
'tab-line': {
templateUrl: "templates/line.html"
}
}
})
.state('tab.line.diary', {
url : "/diary",
views: {
'tab-line-diary': {
templateUrl: "templates/my-diary.html",
controller : "AdvertisementCtrl"
}
}
})
.state('tab.line.discover', {
url : "/discover",
views: {
'tab-line-discover': {
templateUrl: "templates/discover.html"
}
}
});
My tabs.html template :
<ion-nav-bar class="bar-etikt">
<ion-nav-buttons side="left">
<button class="button button-icon icon icon-zoom"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon icon-edit-label"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-footer" delegate-handle="main-tabs">
<ion-tab title="Fil" icon="icon-label-italic" ui-sref="tab.line">
<ion-nav-view name="tab-line"></ion-nav-view>
</ion-tab>
<ion-tab title="Suggestions" icon="icon-group" ui-sref="tab.suggests">
<ion-nav-view name="tab-suggests"></ion-nav-view>
</ion-tab>
<ion-tab title="Notifications" icon="icon-file" ui-sref="tab.notifications">
<ion-nav-view name="tab-notifications"></ion-nav-view>
</ion-tab>
<ion-tab title="Profil" icon="icon-profil" ui-sref="tab.profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
And my line.html template :
<ion-tabs class="tabs-light tabs-top" delegate-handle="sub-tabs">
<ion-tab title="{{ 'my diary' | translate }}" ui-sref="tab.line.diary">
<ion-nav-view name="tab-line-diary"></ion-nav-view>
</ion-tab>
<ion-tab title="{{ 'discover' | translate }}" ui-sref="tab.line.discover">
<ion-nav-view name="tab-line-discover"></ion-nav-view>
</ion-tab>
</ion-tabs>
There is the result :
Thanks for your help,