Back button with nested states

ionic-v1
1

It seems there is a problem with the back button when using nested states.

When using an abstract parent state and navigating directly to the child state (like ui-router is supposed to be used, to my understanding), the back button doesn’t show.

I did find a workaround, which is to set the parent state as non abstract, navigate to it instead of the child and in its controller use $state.go to navigate to the child state.

While it works, I still believe this is just a workaround and the issue is a bug in ionic.
I’d be happy to hear Ionic team’s thoughts.

Here is a codepen demonstrating the issue and the workaround:

1 Like
2

Any response?
I’d really like to know if I’m doing something wrong.

3

Hello @ors, I hope you found a solution about that… FYI I think it’s close to that issue : https://github.com/driftyco/ionic/issues/2997

4

I put my own back button in views that appear outside of my main tabs view by placing the following inside the ion-view tag:

<ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="$ionicGoBack()">
      <i class="icon ion-android-arrow-back"></i>
      <span class="back-text"></span>
    </button>
  </ion-nav-buttons>

Still no transitions, but I don’t care about that for the moment.

5

I tried to put that chunk of code into a simple custom directive, but it didn’t work. Otherwise, I’m not sure how to do it.

6

OK, I found the answer here in another thread

Add this to your controller:

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    viewData.enableBack = true;
});
1 Like
7

This is awesome! Thanks! @devoptix