在右侧对齐导航栏后退按钮

Question

我正在开发一个离子应用程序，我需要对齐右侧的导航栏后退按钮。以下是我的代码：

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

Answer 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);
}

P.S.: 在这种情况下没有使用 <ion-nav-back-button></ion-nav-back-button>

这里有一个例子：http://codepen.io/beaver71/pen/NNWZBp

在右侧对齐导航栏后退按钮

Align navbar back button on right side

css

angularjs

ionic-framework

ionic-view