Ionic Nested Views, Side menu, tabs , master detail page not showing back button on detail page only toggle menu

Question

Hi first of all let me say thanks you for reading my post.

I am new to ionic, I managed to use side menu, tabs, and master detail pattern to structure my app. My problem is that I cant go back when I am in the detail page, I only see the menu toggle button, not the back arrow.

I allready tried some "solutions" but none of them work well.

Here is my code and states.

Part of app.js

         .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

    .state('app.home', {
      url: '/home',
      views: {
        'menuContent': {
          templateUrl: 'templates/home.html'
        }
      }
    })

    .state('app.training', {
      url: '/training',
      abstract: true,
      views: {
        'menuContent': {
          templateUrl: 'templates/training.html'
        }
      }
    })

    .state('app.training.standard.exercise-details', {
      url: "/exercise-details/:id",
      views: {
        'menuContent@app': {
          templateUrl: 'templates/exercise-details.html',
          controller: 'ExerciseDetailsCtrl'

        }}

    })


    .state('app.training.custom', {
      url: '/custom',
      views: {
        'training-custom': {
          templateUrl: 'templates/training-custom.html'
        }

      }
    })

    .state('app.training.standard', {
      url: '/standard',
      views: {
        'training-standard': {
          templateUrl: 'templates/training-standard.html',
          controller: 'TrainingStandardCtrl'
        }
      }
    })

part menu.html

        <ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content >
    <ion-nav-bar class="bar-balanced">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-balanced">
      <h1 class="title">Fitness</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ui-sref="app.home">
          Home
        </ion-item>
        <ion-item menu-close ui-sref="app.objective">
          Objective
        </ion-item>
        <ion-item menu-close ui-sref="app.training.standard">
          Training
        </ion-item>

part index.html

<ion-nav-view></ion-nav-view>

training-standard.html

      <ion-view view-title="Training standard">
  <ion-content>
    <img src="img/{{training[1].image}}" style="width: 50%;
         height: auto; " align="right" >
    <p class="text-left"><strong>Objective: </strong>{{training[1].objectiveName}} </p>
    <p class="text-left"><strong>Level: </strong>{{training[1].level}} </p>
    <p class="text-left"><strong>Description: </strong>{{training[1].description}} </p>


        <ion-list>
          <ion-item class="item" ng-repeat="exercise in training[1].myTraining[0].day1.exercises" ui-sref='app.training.standard.exercise-details({id: exercise.exerciseId})'>
          <img src="img/{{exercise.thumb}}"/><h2>{{exercise.exerciseName}}</h2>
          </ion-item>
        </ion-list>



  </ion-content>
</ion-view>

training.html

  <ion-tabs class="tabs-balanced tabs-top">
  <ion-tab title="Standard" ui-sref="app.training.standard">
  <ion-nav-view name="training-standard"></ion-nav-view>

  </ion-tab>

  <ion-tab title="Custom" ui-sref="app.training.custom">
      <ion-nav-view name="training-custom"></ion-nav-view>
    </ion-tab>

  </ion-tabs>

part exercise-details.html

<ion-view view-title="{{exercise.exerciseName}}">

  <ion-content>

    <h2>{{exercise.exerciseName}} </h2>
    <p>{{exercise.exerciseDesc}}</p>
    <p>{{exercise.exerciseTip}}</p>
    </ion-content>

</ion-view>

I hope you could help me, I am pretty stuck with this, thanks for all!

George.

Answer 1

There are various ways to do it. One of it is to have a back button in the ion's subheader and link a function to it.

In your detail page:

<ion-view>
    <div class="bar bar-subheader bar-calm">
            <a class="button icon-left fa fa-arrow-left button-clear" ng-click='goBack()'></a>
        </div>
</ion-view>

In your detailPageController.js

app.module('yourAppName').controller('detailPageCtrl',function($scope,$ionicHistory){
$scope.goBack = function(){
   $ionicHistory.goBack();
}
});