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，你仍然会看到＆＃34;返回＆＃34; 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：如果你想在导航栏上做一些custimization。我认为选择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

不遵守层次结构视图 - UI路由（离子）

1 个答案: