Spread a single page across tabs

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


  <ion-tab title="Album">
      <h1>Song name and basic info</h1>

  <ion-tab title="Lyrics">
      <h1>Song Lyrics</h1>

  <ion-tab title="Guitar Tabs">
      <h1>Song Tabs</h1>


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?

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

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}}

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.

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

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?


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

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

say me if this works for you aswell :slight_smile: