Add a Back button after removing nav-bar in Meteor-Ionic app

Question

In a Meteor-Angular-ionic app, after hiding the nav-bar in a template to achieve a full-screen view using

<ion-view hide-nav-bar="true">

how do we add a Back button on the top left of the screen that will bring the user back to the previous page?

The idea is to have no visible navbar in one particular template/controller, but still have a back button.

Answer 1

One solution could be to add your custom back button, which will be navigating to the previous screen.

In your template, add the following button

<button class="button icon-left ion-android-arrow-back button-clear button-dark" 
        ng-click="myGoBack()">
</button>

Now, define the custom myGoBack function in your controller

// Your controller
function MyCtrl($scope, $ionicHistory) {
    // myGoBack method 
    $scope.myGoBack = function() {
        $ionicHistory.goBack();
    };
}

Remember to inject the dependency of ionicHistory in your controller.

Please refer the link ionNavBackButton for more detailed information.

Hope this will help.

Thanks!

Answer 2

Use the following div

<div class="col-md-12">
 <button class="pull-left btn btn-primary"> Back </button>
<div>