2014-03-30 5 views
9

Ich benutze Ionic und möchte eine Rücktaste in der Fußzeile erstellen. Hier ist, wie ich es mache.Wie erstelle ich eine Zurück-Schaltfläche in der Fußzeile (Ionische Rahmen)?

Meine Ansicht:

<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> 

und der Controller für diese Ansicht:

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

Meine Frage: Gibt es einen besseren Weg, um diese (dh eine Richtlinie) zu tun, oder ist dies, wie Sie Machst du das auch?

Antwort

9

Mit der Aktion benutzerdefinierten Klick, mit $ ionicNavBarDelegate:

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

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

Von den ionischen docs: http://ionicframework.com/docs/nightly/api/directive/ionNavBackButton/

+1

Vielen Dank für Ihre Antwort! Das habe ich gesehen. Ich verstehe jedoch, dass die ion-nav-Leiste eine Top-of-Page-Navigationssteuerung ist, die einer Kopfzeile ähnlich ist und nicht in eine Fußzeile eingebettet werden kann. – thinkbigthinksmall

+0

Sie haben Recht. Entschuldigung, ich hätte klarer sein sollen. Verwenden Sie ng-klicken Sie auf Ihre Schaltfläche zurück, um eine Funktion aufzurufen, die $ ionicNavBarDelegate.back() enthält, wie im obigen Beispiel. Ich bearbeite das Beispiel und entferne die Ion-Nav-Leiste aus Gründen der Übersichtlichkeit. –

+0

Was ist CanGoBack hier? Ich würde nur den Zurückknopf zeigen wollen, wenn Sie zurückgehen können, wie es mit Ionen-nav-back-Knopf –

6

Sie könnte auch nur verwenden:

$ionicHistory.goBack(); 
8

Verwenden $ionicGoBack Funktion als Klickhandler

<button class="button" ng-click="$ionicGoBack()">Back</button> 
Verwandte Themen