在Ionic / Angular JS中刪除基於Sidemenu模板中的導航欄

Question

我使用Ionic Framework創建了一個應用程序，並且運行良好。 它基於sidemenu-template，因此我始終在應用程序頂部有一個導航欄。

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-calm">
      <ion-nav-back-button></ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon-round" 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-content>
      <a menu-close href="#/app/bla">
        <div id="profile-item">
          <i class="icon ion-card"></i> Bla
        </div>
      </a>
      <a menu-close href="#/app/register">
        <div id="profile-item">
          <i class="icon ion-card"></i> Sign-up
        </div>
      </a>
      <a menu-close href="#/app/login">
        <div id="profile-item">
          <i class="icon ion-card"></i> Login
        </div>
      </a>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

app.js：

$stateProvider.state('app.login', {
  url: '/login',
  views: {
    'menuContent': {
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
    }
  }
})

$stateProvider.state('app.start', {
  url: '/start',
  views: {
    'menuContent': {
      templateUrl: 'templates/start.html',
      controller: 'StartsCtrl'
    }
  }
})

現在，對於注冊和登錄視圖，我根本不想顯示導航欄。 如何在特定視圖上將其刪除？ 我覺得這很困難，因為導航欄是在menu.html中定義的，該菜單在視圖之前被調用。

Answer 1

我不得不修改app.js中的路由定義：

$stateProvider.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'LoginCtrl'
})

$stateProvider.state('start', {
  url: '/start',
  templateUrl: 'templates/start.html',
  controller: 'StartsCtrl'
})

由於用戶仍然可以在屏幕上向右滑動以顯示菜單，因此只能刪除“ togleg”按鈕不起作用。

Answer 2

只需隱藏menu-toggle按鈕即可為您解決問題。

在rootScope上設置一個變量，基於該變量可以顯示/隱藏導航欄切換按鈕：

<button ng-if="$root.isShowNav" class="button button-icon button-clear ion-navicon-round" menu-toggle="left">

在應用程序的.run中設置此變量的值：

.run(function($ionicPlatform, $rootScope) {
  // $rootScope.isShowNav = true/false based on some condition.
}

例如，在這里您可以執行以下操作：

.run(function($ionicPlatform, $rootScope) {
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState) {
    if (toState.name !== "app.login" || toState.name !== "app.start") {
      $rootScope.isShowNav = true; 
    }
    else {
      $rootScope.isShowNav = false;
    }
   }
}