Spread a single page across tabs

ionic-v1
#1

Hi, how can we break a single view across tabs. Need to do something like this:

<ion-tabs>

  <ion-tab title="Album">
      <h1>Song name and basic info</h1>
      {{song.name}}
      {{song.length}}
  </ion-tab>

  <ion-tab title="Lyrics">
      <h1>Song Lyrics</h1>
      {{song.lyrics}}
  </ion-tab>

  <ion-tab title="Guitar Tabs">
      <h1>Song Tabs</h1>
      {{song.tabs}}
  </ion-tab>

</ion-tabs>

The above code does not seem to work. I understand that <ion-tabs> directive is to be used for global tabbed interface where each tab has its own state, controller and template. Is it possible to use tabs with-in a single template just to spread the content across multiple tabs?

#2

What if you use one controller on ion-tabs and get data from this controller?

#3

A possibility is to use $rootScope.
You can add the songs to the $rootScope -> $rootSscope.song = {…}
Then in the differents tabs you can access your song-data with {{$root.song.name}}

#4

Thanks for the answer.

It seems to be working now. http://run.plnkr.co/plunks/xFOS19z2RRHbTtP9SGTs/#/app/song

Seems there was some error in the code. When I tried to isolate the above in a Plnkr, it worked.

#5

No problem mate happy that could help you out :smile:
If you get any problems you can always pm me :wink:

#6

Just a followup. Though the above is working, some of the content in the tab area is overlapped by the navigation bar and is not visible. Example: http://run.plnkr.co/plunks/xFOS19z2RRHbTtP9SGTs/#/app/song

Any solution to this?

Thanks.

#7

I don’t really see that issue but had problem with overlapping and putted this before any text etc.

<ion-view>
  <ion-content>
     <div class="spacer" style="height: 5px;"></div>
        Your html code here
  </ion-content>

say me if this works for you aswell :slight_smile: