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?
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.
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.
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.
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/
Use the $ionicGoBack
function as the click handler
<button class="button" ng-click="$ionicGoBack()">Back</button>
You could also just use:
$ionicHistory.goBack();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With