CODEWITHSUNDEEP
ionic-framework
user1995781
user1995781

Reputation: 19453

How to force Ionic display back button on certain page?

When navigating from one page to another, Ionic automatically display back button at the navigation bar. However, there are certain case where ionic don't display the back button. For example, when you navigate from a tab page to a none tab page.

How can I force Ionic to display back button on certain page?

Javascript:

.state('app.tab.playlists', { //<!-- Tab content page
  url: '/playlists',
  views: {
    'tab-Content': {
      templateUrl: 'templates/playlists.html',
      controller: 'PlaylistsCtrl'
    }
  }
})

.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
  url: '/singer',
  views: {
    'menuContent': {
      templateUrl: 'templates/singer.html'
    }
  }
})

Upvotes: 14

Views: 22921

Answers (3)

Gopal B Shimpi
Gopal B Shimpi

Reputation: 139

Add follwing lines inside your 

<ion-navbar hideBackButton="true">
    <button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>

Upvotes: 0

Mariano Schmands
Mariano Schmands

Reputation: 806

You can tell it in your controller. Try:

 .controller('yourCtrl', function($scope) {

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
  viewData.enableBack = true;
}); 

})

But like LeftyX said. The history function for tab to non tab view is buggy.

Upvotes: 30

LeftyX
LeftyX

Reputation: 35587

Ionic manages a history while you're navigating from one view to the other.

$ionicHistory keeps track of views as the user navigates through an app. Similar to the way a browser behaves, an Ionic app is able to keep track of the previous view, the current view, and the forward view (if there is one). However, a typical web browser only keeps track of one history stack in a linear fashion.

Unlike a traditional browser environment, apps and webapps have parallel independent histories, such as with tabs. Should a user navigate few pages deep on one tab, and then switch to a new tab and back, the back button relates not to the previous tab, but to the previous pages visited within that tab.

There's a bug open on github which hasn't been fixed yet (and will only be fixed in 2.0) where Adam Bradley states:

The back button does not display because when you go into a tab, it enter's it own "history", meaning each tab has its own navigation back and forward.

So, basically, when you move from tabs to regular view you're going to lose the back button.

What you can do is to create one yourself:

<ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
        <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
</ion-nav-buttons>

and place it inside your view:

<ion-view view-title="home">

  <ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
      <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
  </ion-nav-buttons>

    <ion-content padding='true' scroll='false' has-footer='false'>

        <div class="card">
            <div class="item item-text-wrap">
                HOME PAGE
            </div>
        </div>

    </ion-content>

</ion-view>

As you can see I've used ng-click="goBack()" for the button.

In your controller you simply would:

$scope.goBack = function(){
    $ionicHistory.goBack();
}

don't forget to inject $ionicHistory in your controller.

PS: This is a over-simplified solution as it does not check if the history has got a backview:

$ionicHistory.viewHistory().backView

Upvotes: 18

Related Questions