離子嵌套視圖，側邊菜單，標籤，主詳細信息頁面不顯示返回按鈕僅詳細信息頁面開關菜單

Question

嗨，首先讓我說感謝您閱讀我的文章。

我是新來的離子，我設法使用側面菜單，選項卡和主要細節模式來構建我的應用程序。我的問題是，當我在詳細信息頁面時，我無法返回，我只看到菜單切換按鈕，而不是後退箭頭。

我已經嘗試了一些「解決方案」，但沒有一個能很好地工作。

這是我的代碼和狀態。

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

部分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> 

部分的index.html

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

培訓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> 

部分運動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> 

我希望你能幫助我，我很堅持這一，謝謝大家！

George。

Answer 1

有很多種方法可以做到這一點。其中之一是在離子的副標題中有一個後退按鈕，並將一個功能鏈接到它。

在您的詳細信息頁面：

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

在你detailPageController.js

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