2016-02-29 3 views
2

Я разрабатываю ионное приложение, и мне нужно выровнять навигационную кнопку назад с правой стороны. Ниже мой код:Выровнять навигационную кнопку назад на правой стороне

<ion-view title="Home" ng-controller="HomeCtrl" style="padding-top: 50px"> 
    <ion-nav-bar class="bar-balanced bar-dark"> 
    <ion-nav-back-button></ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-content scroll="true"> 
    <ion-list> 
     <ion-item ng-repeat="item in items" href="#/res/{{item}}"> 
     {{item.toUpperCase()}} 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-view> 

И я попытался следующий код для кнопки выравнивания с помощью ion-nav-buttons:

<ion-view title="Home" ng-controller="HomeCtrl" style="padding-top: 50px"> 
    <ion-nav-bar class="bar-balanced bar-dark"> 
    <ion-nav-buttons side="right"> 
     <ion-nav-back-button></ion-nav-back-button> 
    </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-content scroll="true"> 
    <ion-list> 
     <ion-item ng-repeat="item in items" href="#/res/{{item}}"> 
     {{item.toUpperCase()}} 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-view> 

Но приведенный выше код бросали ошибки, как:

Error: [$compile:ctreq] Controller 'ionNavBar', required by directive 'ionNavBackButton', can't be found! 
http://errors.angularjs.org/1.4.3/$compile/ctreq?p0=ionNavBar&p1=ionNavBackButton 
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13380:12 
    at getControllers (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21319:19) 
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21445:33) 
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13) 
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13) 
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13) 
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24) 
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13) 
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13) 
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20728:30) <ion-nav-bar class="bar-balanced bar-dark nav-bar-container" nav-bar-transition="ios">(anonymous function) @ ionic.bundle.js:25642 
ionic.bundle.js:1173 'webkitMovementX' is deprecated. Please use 'movementX' instead. 

ответ

1

Вы можете используйте этот код:

<ion-nav-buttons side="right"> 
    <button class="button button-icon button-clear ion-arrow-left-c" ng-click="goBack()">back 
    </button> 
</ion-nav-buttons> 

и в контроллере (ы):

$scope.goBack = function() { 
    $ionicHistory.goBack(-1); 
} 

PS: в данном случае не используется <ion-nav-back-button></ion-nav-back-button>

Вот пример: http://codepen.io/beaver71/pen/NNWZBp

+0

предоставить код для тестирования, как и в моем проекте работает отлично (а также в кодефене). Кроме того, в вашем коде нет необходимости в кнопке ion-nav-back-button, так как возможно, что у вас есть эта ошибка? – beaver

+0

На самом деле спасибо человеку ...... он работает сейчас :) –

+0

еще один вопрос, Как я могу дать такое же поведение, что он должен быть скрыт, если страница загружена изначально, что нет истории страниц (например: home страница) –

Смежные вопросы