Back navigation in Footer instead of Header?

ionic-v1
1

I need to make a footer with left side area to show the ‘back’ button and right side area to have a fixed image/text so I have tried with this markup :

<ion-footer-bar align-title="right" class="bar footer">
    <div class="row">
        <div class="col">
            <ion-nav-bar>
                <ion-nav-back-button class="button-clear">
                    <i class="ion-arrow-left-c"></i>
                </ion-nav-back-button>
            </ion-nav-bar>
        </div>

        <div class="col-10 text-right">
            <div class="row">
                <div class="col">
                    <div class="footer-text">
                        copyright 2015...
                    </div>
                </div>
                <div class="col">
                    <div class="logo-footer nav-image">
                    </div>
                </div>
            </div>
        </div>
    </div>
</ion-footer-bar>

But the footer no longer shows up and I get errors about “Controller ‘ionNavBar’, required by directive ‘ionNavTitle’, can’t be found!”

2

you have to build your own backbutton.

like an ordinary button with a ng-click function that calls $ionicHistory.goBack();

the $ionicHistory-Service has also some nice functions
http://ionicframework.com/docs/api/service/$ionicHistory/

like getting the backView of the current view

3

Ok so I have a simple directive in directives.js :

angular.module('myapp.directives', [])
    .directive('customBack', [function ($ionicHistory) {
            return {
                restrict: 'E',
                replace: true,
                scope: false,
                template: '<button class="button icon button-clear"></button>',

                compile: function (element, attrs) {
                    angular.element(element[0]).addClass('ion-android-arrow-back');
                }
            };
        }])

How would I implement $ionicHistory such that the directive only shows up if I can go back ? And how would I set the text depending on the page (similar to the actual back button)

4

i would get the backView of the current view with $ionicHistory.backView() if there is one -> show backbutton and on click --> call $ionicHistory.goBack()

with $ionicHistory.currentTitle([val]) you can get and set current view title … if you need more info you can get the whole current view with $ionicHistory.currentView()