Ionic geschachtelte Ansichten, Side-Menü, Tabs, Master-Detailseite nicht zurück Schaltfläche nur auf der Detailseite toggle Menü

Question

Hallo, zunächst möchte ich sagen, danke, dass Sie meinen Beitrag gelesen haben.

Ich bin neu zu ionischen, ich habe es geschafft, Side-Menü, Tabs und Master-Detail-Muster zu verwenden, um meine App zu strukturieren. Mein Problem ist, dass ich nicht zurückgehen kann, wenn ich auf der Detailseite bin. Ich sehe nur die Umschalttaste des Menüs, nicht den Zurück-Pfeil.

Ich habe schon einige "Lösungen" ausprobiert, aber keine von ihnen funktioniert gut.

Hier ist mein Code und Staaten.

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

Teil 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> 

Teil index.html

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

trainings 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> 

Teil belastungs 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> 

Ich hoffe, dass mir helfen könnte, ich mit diesem ziemlich stecken bin , Danke für alles!

George.

Answer 1

Es gibt verschiedene Möglichkeiten, dies zu tun. Eine davon ist, eine Back-Taste im Unterkopf des Ions zu haben und eine Funktion damit zu verbinden.

In Ihrer Detailseite:

<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 Ihrem detailPageController.js

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