不遵守层次结构视图 - UI路由(离子)

Question

我正在开发一个Ionic应用程序,我已经实现了一个带有3张幻灯片,一些文本和<a href="...">标签的入门屏幕,可直接进入开始屏幕.

现在我注意到,当我点击<a href="...">标签时,我被重定向到正确的视图,但顶部的导航栏有一个后退按钮,其中应该有一个汉堡包菜单图标.

不确定我是否正确实施路由系统.使用路由并尊重分层视图的原因是什么？

Html代码(登机):

<ion-view view-title="WNRS" hide-nav-bar="true">
  <ion-content scroll="false" has-header="true" class="has-header">
      <ion-slide-box on-slide-changed="slideChanged(index)">
          <ion-slide>
            <h4  class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4>
            <br><br>
            <a ui-sref="app.base1"><h2>Play</h2></a>
          </ion-slide>
          <ion-slide>
            <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4>
            <br><br>
            <a ui-sref="app.base1"><h2>Play</h2></a>
          </ion-slide>
          <ion-slide>
             <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4>
             <br><br>
             <a ui-sref="app.base1"><h2>Play</h2></a>
          </ion-slide>
      </ion-slide-box>
  </ion-content>
</ion-view>

app.js代码的一部分(路由部分):

// Routes
app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('app', {
    cache: false,
    url: '/app',
    abstract: true,
    templateUrl: 'components/sidebar_menu/menu.html'
  })

  .state('app.walkthrough', {
    url: '/walkthrough',
    views: {
       'menuContent': {
          templateUrl: 'views/walkthrough/walkthrough.html',
          controller: 'WalkthroughCtrl' 
        }  
      }
  })

  .state('app.base1', {
    url: '/base1',
    views: {
       'menuContent': {
          templateUrl: 'views/base1/base1.html',
          controller: 'Base1Ctrl'
        }  
      }
  })

  .state('app.base2', {
    url: '/base2',
    views: {
       'menuContent': {
          templateUrl: 'views/base2/base2.html',
          controller: 'Base2Ctrl'
        }  
      }
  })

  .state('app.base3', {
    url: '/base3',
    views: {
       'menuContent': {
          templateUrl: 'views/base3/base3.html',
          controller: 'Base3Ctrl'
        }  
      }
  })

  .state('app.add_question', {
    url: '/add_question',
    views: {
      'menuContent': {
        templateUrl: 'views/add_question/add_question.html',
        controller: 'AddQuestionCtrl'
      }
    }
  })

  $urlRouterProvider.otherwise('/app/walkthrough');
});

Answer 1

两种选择： 1. 将演练页面设为父页面，将 base1、base2、base3 设为子页面。但即使这样，如果你从base1切换到base2，你仍然会在base2页面上看到“后退”按钮。

或者您可以简单地自定义 base1、base2、base3 中的 ion-nav-bar，如下所示：

<ion-view>
  <ion-nav-bar>
    <ion-nav-buttons side="left">
      <button class="button your-hambuger" menu-toggle="left">
      </button>
    </ion-nav-buttons>
    <ion-nav-title>
        Base1
    </ion-nav-title>
  </ion-nav-bar>
  <ion-content>
    Some content  
  </ion-content>
</ion-view>

更新：例如，如果您想禁用 base1 上的后退按钮，您可以将以下代码添加到您的 base1 控制器中：

.controller('Base1Ctrl', ['$scope', function ($scope) {
    //add below code to disable back button
    $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
        viewData.enableBack = false; 
    });
}])

Update2：如果你想在导航栏上做一些定制。我认为选择2是唯一的选择。首先转到 menu.html 并删除 ion-nav-bar 部分。将此部分复制到您想要显示带有汉堡包图标的 ion-nav-bar 的页面。对于您想要显示后退按钮的页面，您可以向该页面添加 ion-header-bar 代码：

<ion-view view-title="Base2">
  <ion-header-bar class="bar-stable" id="nav-bar">
    <button ng-click="goState()" class="button back-button buttons button-clear header-item">
      <i class="icon ion-ios-arrow-back"></i> 
      <span class="back-text"><span class="default-title">Base1</span></span>
    </button>
    <div class="title title-center header-item">Base2</div>
    <button ng-click="goState2()" class="button back-button buttons button-clear header-item">      
      <span class="back-text"><span class="default-title">Base3</span></span>
      <i class="icon ion-ios-arrow-forward"></i> 
    </button>
  </ion-header-bar>
  <ion-content>
     Base2 content
  </ion-content>
</ion-view>

您可以在 base2 控制器中添加 goState() 函数，或者只为该按钮提供 ui-sref