菜单关闭attritube in ionic使后退按钮消失

时间:2017-01-08 23:40:37

标签: ionic-framework

我正在进行一项离子项目,而且我同时使用了sidemenu和tabs模板,我点击了侧面菜单中的任何链接并进行了导航,后面我意识到了这一点按钮没有显示,当我从我的脚本中取出菜单关闭它导航和后退按钮显示而不关闭侧面菜单。我可以找到一种方法,在侧面菜单关闭时如何使后退按钮显示

<ion-side-menus enable-menu-with-back-views="true">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-assertive" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
            <ion-nav-title>
     <img src="img/logo_white.png" width="60" height="30" style="position:relative; top:7px" />

    </ion-nav-title>
    </ion-nav-bar>

<ion-tabs class="tabs-icon-top tabs-color-active-assertive tabs-stable">

  <!-- Dashboard Tab -->
  <ion-tab title="Home" icon="ion-android-home"  href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="News" icon="ion-ios-paper"  href="#/tab/news">
    <ion-nav-view name="tab-news"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Livescore" icon="ion-ios-football"  href="#/tab/livescore">
    <ion-nav-view name="tab-livescore"></ion-nav-view>
  </ion-tab>

    <!-- Account Tab -->
  <ion-tab title="Highlights" icon="ion-play"  href="#/tab/highlights">
    <ion-nav-view name="tab-highlights"></ion-nav-view>
  </ion-tab>
</ion-tabs>

  </ion-side-menu-content>

   <!-- Side Menu (right) -->
  <ion-side-menu side="right">
    <ion-header-bar class="bar-assertive">
      <h1 class="title">APP</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>

         <ion-item menu-close href="#/tab/home">
          <i class="ion-home"></i> Home
        </ion-item>

       <ion-item menu-close href="#/tab/myteams">
          <i class="ion-android-star"></i> My Teams 
        </ion-item>




      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

1 个答案:

答案 0 :(得分:2)

我建议你在Any way to -not- reset history stack on menu-close?进行讨论。根据Ionic文档,menu close将重置历史堆栈。

在sidebar.html中,使用(例如)

<ion-item ng-click="closeMenu()" ui-sref="app.report">Report</ion-item>

而不是:

<ion-item menu-close href="#/app/report">Report</ion-item>

并将closeMenu()定义为:

$scope.closeMenu = function() {
  $ionicHistory.nextViewOptions({disableAnimate: true});
  $ionicSideMenuDelegate.toggleLeft();
}

在您应用的主控制器中(例如在app.js中):

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/sidebar.html',
    controller: 'AppCtrl'
  })

不要忘记注入$ ionicHistory&amp; $ ionicSideMenuDelegate。

有了这个,“报告”(来自侧边栏)现在应该有后退按钮。