Change back button text only for certain views?


#1

Is there a way to change the back button text ( eg, from “Back” to “Cancel” ) only for certain views ?

Eg, I want my editMain’s back button text to be “Cancel”, but others’ should be “Back” as defined in index.html

app.js:

.state('tab.editMain', {
     url: '/editMain',
    views: {
        'tab-dash': {
        templateUrl: 'templates/editMain.html',
        controller: 'EditMainCtrl'
        }
     }
})

index.html:

  <body ng-app="starter" animation="slide-left-right-ios7">
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon ion-chevron-left">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>

#2

I may be somewhat new here but my two cents would be:

Ionic uses Angular for DOM manipulation which should give you two ways to easily change the text (without having to resort to another 3rd party library like jQuery).

1.) Use an Expression {{ buttonText }} which is defined in one/both of your controllers, or the rootScope.
2.) Make a directive which you can fire off an event to use pure javascript to manipulate the text inside of the ion-nav-back-button element

Again just a newbie’s suggestion so take it with a grain of salt!