对准右侧导航栏的后退按钮 [英] Align navbar back button on right side

问题描述

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

 ＆LT;离子视图标题=家NG-控制器=HomeCtrl的风格=填充顶：50px​​的＆GT;
  ＆LT;离子导航栏类=酒吧，酒吧平衡暗＆GT;
    ＆LT;离子NAV-后退按钮＆GT;＆LT; /离子NAV-后退按钮＆GT;
  ＆LT; /离子导航栏＆GT;
  ＆LT;离子含量滚动=真正的＆GT;
    ＆LT;离子列表＆gt;
      ＆LT;离子项目NG重复= HREF =＃/ RES / {{项目}}＆GT中的项项;
        {{item.toUpperCase（）}}
      ＆LT; /离子项目＆GT;
    ＆LT; /离子列表＆gt;
  ＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

和我试过以下code，使用离子导航，按键排列按钮：

 ＆LT;离子视图标题=家NG-控制器=HomeCtrl的风格=填充顶：50px​​的＆GT;
  ＆LT;离子导航栏类=酒吧，酒吧平衡暗＆GT;
    ＆LT;离子NAV-按键侧=右＆GT;
      ＆LT;离子NAV-后退按钮＆GT;＆LT; /离子NAV-后退按钮＆GT;
    ＆LT; /离子NAV-按钮＆GT;
  ＆LT; /离子导航栏＆GT;
  ＆LT;离子含量滚动=真正的＆GT;
    ＆LT;离子列表＆gt;
      ＆LT;离子项目NG重复= HREF =＃/ RES / {{项目}}＆GT中的项项;
        {{item.toUpperCase（）}}
      ＆LT; /离子项目＆GT;
    ＆LT; /离子列表＆gt;
  ＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

但上面的code投掷的错误，如：

 错误：[$编译：ctreq]控制器ionNavBar，由指令'ionNavBackButton要求，无法找到！
http://errors.angularjs.org/1.4.3/$compile/ctreq?p0=ionNavBar&p1=ionNavBackButton
    在http：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：13380：12
    在getControllers（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：21319：19）
    在nodeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：21445：33）
    在compositeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：20853：13）
    在compositeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：20857：13）
    在compositeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：20857：13）
    在nodeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：21457：24）
    在compositeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：20853：13）
    在compositeLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：20857：13）
    在publicLinkFn（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：20728：30）＆LT;离子导航栏类=酒吧，酒吧平衡暗导航栏容器导航-bar过渡=IOS＆GT;（匿名函数）@ ionic.bundle.js：25642
ionic.bundle.js：1173webkitMovementX'是pcated德$ P $。请使用'movementX'代替。
 

解决方案

您可以使用此code：

 ＆LT;离子NAV-按键侧=右＆GT;
    ＆LT;按钮类=按钮，按钮图标按钮清晰离子左箭头-CNG点击=GoBack的（）＆GT;回
    ＆LT; /按钮＆GT;
＆LT; /离子NAV-按钮＆GT;
 

和在你的控制器（S）：

  $ scope.goBack =功能（）{
  $ ionicHistory.goBack（-1）;
}
 

P.S：在这种情况下，没有＆LT;离子NAV-后退按钮＆GT;＆LT; /离子NAV-后退按钮＆GT; 使用

下面是一个例子： HTTP：//$c$cpen.io/beaver71/pen / NNWZBp

I'm developing an ionic app and I need to align the navbar back button on right side. The following is my code:

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

And I've tried following code for aligning button using 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>

But the above code throwing error like:

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.

解决方案

You can use this code:

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

and in your controller(s):

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

P.S.: in this case no <ion-nav-back-button></ion-nav-back-button> is used

Here is an example: http://codepen.io/beaver71/pen/NNWZBp

这篇关于对准右侧导航栏的后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！