Tab nested inside a side-menu-content view

ionic-v1
1

Hello everyone,

I have trouble with the tab view which is displayed inside a side-menu-content after a link was clicked.
I have assembled the following codepen: http://codepen.io/anon/pen/ZYLjMQ

For the normal non-tabbed view navigation works as expected.
When navigating to the tab, the back button is not displayed anymore. I figured that the problem lies with the “nested abstract views”.

Maybe you can help me.

2

I have same problem. Anyone has answer to this one?

3

In the mean time, I have found a solution that fixes it for me.
In the main Tab Controller, you have to add:

  $scope.$on('$stateChangeSuccess',function (event, toState, toParams, fromState, fromParams) {
    if($scope.comingFrom == null){
      $scope.comingFrom = fromState;
      console.log("Setting from state in tab once...")
    }

  });

This saves the state the user came from. In every tab, you can add button as you like:

  <ion-nav-buttons side="left">
    <button class="button button-clear" ng-click="myGoBack()"><i class="icon ion-ios7-arrow-back"></i></button>
  </ion-nav-buttons>

And in the controllers of the individual tabs, you add the back functions:

  $scope.myGoBack = function () {
    $ionicHistory.clearHistory()
    $state.go($scope.comingFrom)
  };

I am pretty sure it is not the most elegant solution, but it works very well and you can control in every tab if you want to display the back button or not. This allows you to have the back button maybe only in your landing tab and not in all the others, etc…
Hope that helps.

1 Like
4

Could you post a codepen for your workaround if possible, thanks