Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to create a back button in the footer (ionic framework)?

I'm using Ionic and want to create a back button in the footer. Here's how I'm doing it.

My view:

  <div class="bar bar-footer bar-dark">
    <button class="button button-outline button-light" ng-click="goBack()"><i class="ion-arrow-left-c"></i> Back</button>
  </div>

and the controller for this view:

$scope.goBack = function () {
    window.history.back();
};

My question: is there a better way of doing this (i.e. a directive), or is this how you are doing this also?

like image 806
thinkbigthinksmall Avatar asked Mar 30 '14 02:03

thinkbigthinksmall


People also ask

How do you back button in Ionic?

The @capacitor/app package must be installed in Capacitor apps to use the hardware back button. When running in a Capacitor or Cordova application, Ionic Framework will emit an ionBackButton event when a user presses the hardware back button.

How do you use the back button in Ionic 5?

The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack. To change what is displayed in the back button, use the text and icon properties.

Why does my back button not show on Ionic?

The back button will only show if there is a page to go back to. So if you go from /home to /page2 , the back button will show up on /page2 because you have /home to go back to.


3 Answers

With custom click action, using $ionicNavBarDelegate:

<button class="button" ng-click="goBack()">Back</button>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.goBack = function() {
    $ionicNavBarDelegate.back();
  };
}

From the ionic docs: http://ionicframework.com/docs/nightly/api/directive/ionNavBackButton/

like image 92
Dev01 Avatar answered Oct 27 '22 09:10

Dev01


Use the $ionicGoBack function as the click handler

<button class="button" ng-click="$ionicGoBack()">Back</button>
like image 38
Jeferson Rivera Avatar answered Oct 27 '22 09:10

Jeferson Rivera


You could also just use:

$ionicHistory.goBack();
like image 43
lucasl Avatar answered Oct 27 '22 10:10

lucasl