CODEWITHSUNDEEP
ionic-framework
user6579134
user6579134

Reputation: 839

menu-close attritube in ionic makes back button disappears

i'm working on an ionic project and i'm using both the sidemenu and tabs template, what i've realized is when i click on any link in the sidemenu and it navigates, the back button is not shown, when i take out the menu-close from my script it navigates and the back button shows without close the sidemenu. can i find a way out of how to make the back button show while the sidemenu closes

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

Upvotes: 1

Views: 936

Answers (1)

Shivraj
Shivraj

Reputation: 46

I would suggest you to go through the discussion at Any way to -not- reset history stack on menu-close?. As per the Ionic documentation, menu close will reset the history stack.

In sidebar.html, use (for example)

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

instead of:

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

and define the closeMenu() as:

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

in your app's main controller (for example in app.js):

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

Don't forget to inject both $ionicHistory & $ionicSideMenuDelegate.

With this, "Report" (from sidebar) should have the back button now.

Upvotes: 2

Related Questions