Ui-router, working with abstract tabs and button

terryoleary · March 17, 2015, 9:15pm

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

Thank you!!!

pjusto · March 19, 2015, 9:32am

@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'
      }
    }
  })

and

<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>
    <ion-tab icon="ion-navicon-round" ui-sref="tab.profile">
       <ion-nav-view name="tab-profile"></ion-nav-view>
    </ion-tab>
  </ion-tabs>

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

terryoleary · March 19, 2015, 9:46am

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

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

pjusto · March 19, 2015, 10:13am

that didn’t work

aaronksaunders · March 19, 2015, 1:30pm

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?

pjusto · March 19, 2015, 6:18pm

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.

pjusto · March 24, 2015, 12:35pm

@aaronksaunders here’s the codepen

yurinondual · March 24, 2015, 5:29pm

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

pjusto · March 24, 2015, 5:48pm

@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