angularjs - 层次结构 View 不被尊重 - UI Route (Ionic)

Question

我正在开发一个 Ionic 应用程序，我已经实现了一个包含 3 张幻灯片、一些文本和 <a href="..."> 的登录屏幕。标签直接转到开始屏幕。

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

不确定我是否正确地实现了路由系统。为什么使用路由并尊重分层 View 是正确的？




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

.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 Controller 中添加 goState() 函数，或者只为该按钮提供一个 ui-sref