25330

Align navbar back button on right side

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.

Answer1:

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

Recommend

  • Understanding the quality of the KMeans algorithm
  • SOAP web service: many servers, one interface
  • HBase region over region servers load not balanced
  • How to configure javadb in eclipse?
  • css background transition in opera goes through black
  • Using cross_val_predict against test data set
  • Customize google placepicker colors for android
  • Samsung Galaxy Tab 10.1 and -webkit-tap-highlight-color style?
  • JQM (jQueryMobile) Problem with AJAX content and focus()
  • wrong item changes in recyclerview
  • How to expand parent div to account for child's overflow?
  • C# List of Panels
  • Primefaces :radioButton inside a ui:repeat
  • Floated image with variable width and heading with background image
  • Firefox Extension - Monitor refresh and change of tab
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Change multiple background-images with jQuery
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Can Jackson SerializationFeature be overridden per field or class?
  • Window Size for Mac application
  • Sending data from AppleScript to FileMaker records
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Cannot Parse HTML Data Using Android / JSOUP
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • Java static initializers and reflection
  • Turn off referential integrity in Derby? is it possible?
  • Add sale price programmatically to product variations
  • unknown Exception android
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • How do I use LINQ to get all the Items that have a particular SubItem?