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

发布时间：2020-12-17 07:14:44 所属栏目：安全来源：网络整理

导读：我正在开发一个Ionic应用程序,我已经实现了一个带有3张幻灯片,一些文本和 a href =“...”的登机屏幕.标签直接转到开始屏幕. 现在我注意到当我点击 a href =“...”标签我被重定向到正确的视图但顶部的导航栏有一个后退按钮,其中应该有一个汉堡包菜单图标.

我正在开发一个Ionic应用程序,我已经实现了一个带有3张幻灯片,一些文本和< a href =“...”>的登机屏幕.标签直接转到开始屏幕.

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

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

enter image description here

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

解决方法

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

或者你可以简单地在base1,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>

enter image description here

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!