Ui-router, working with abstract tabs and button

ah yes! it works! I just need to do the back button :smile:

Thank you!!!

@yurinondual I have a very similar structure like:

.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"

  .state('tab.more', {
    url: '/more',
    views: {
      'tab-more': {
        templateUrl: 'templates/tab-more.html',
        controller: 'moreCtrl'

  .state('tab.profile', {
    url: '/profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/profile.html',
        controller: 'profileCtrl'


<ion-tabs class="tabs-dark" >
    <ion-tab icon="ion-navicon-round" ui-sref="tab.more">
       <ion-nav-view name="tab-more"></ion-nav-view>
    <ion-tab icon="ion-navicon-round" ui-sref="tab.profile">
       <ion-nav-view name="tab-profile"></ion-nav-view>

when I navigate from other page to nested view ‘tab-profile’ I have NO backbutton. It is because its a child view?

I’ve tried remove abstract from ‘tab’ but with no success.

I’ve already saw some talking about this by @mhartington

What should I do?

Thank you :wink:

I added the back button to the view in question and that worked

  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
1 Like

that didn’t work :pensive:

where is the codePen for this? That might make it a ot easier for you to get some help and it shouldn’t take that long to put it together?

Ok, I’ve created a simple codePen.
When navigating from HOME to OTHER-PAGE animation and back-button appears, but when navigating from OTHER-PAGE to TABS the animation and back-button is lost.

@aaronksaunders here’s the codepen

This is expected behaviour. Ionic clears state history when navigating between tabs. SO each tab has it’s own history. But you can implement your own back button that will go to your desired route

@yurinondual thank you for your reply.
I know that ‘outter’ history is cleared when navigating between tabs.
This is the current behaviour but not the expected one, when navigating to a view with tabs we should be able to go back to previous state (I’m not talking about between this view tabs).

Also, I dont want to hardcode button back behaviour. Ionic Navigation should handle that.

Ionic is great and in my opinion this is the most important bug that has not yet been fixed.

There is an opened issue in github driftyco/ionic