Question

首先，请允许我感谢您阅读我的帖子。

我是离子新手，我设法使用侧边菜单，标签和主细节模式来构建我的应用程序。我的问题是，当我在详细页面时，我不能回去，我只看到菜单切换按钮，而不是后退箭头。

我已经尝试了一些＆＃34;解决方案＆＃34;但是没有一个能很好地运作。

这是我的代码和陈述。

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>

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

我希望你能帮助我，我非常感谢你，感谢所有人！

乔治。

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();
}
});

离子嵌套视图，侧边菜单，标签，主详细信息页面仅显示详细信息页面上的后退按钮切换菜单

1 个答案: