Problem with nested tabs


#1

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,


#2

It seems it’s a bug in 1.0.0-beta.13 version.
Corrected in 1.0.0-beta.14