Change/Hide ion-nav-back-button text

ionic-v1
21

Yep, you could use $ionicConf

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats, $ionicConfig) {
  $scope.chat = Chats.get($stateParams.chatId);
  $ionicConfig.backButton.text("")
})
4 Likes
22

I used it and it works fine, but after you visit this page all the back buttonsā€™ text will be empty, not only this page.

23

Right, the configuration is changed at that point. Itā€™s not set for that particular view, but for the whole app at that point. Itā€™s another form of $ionicConfigProvider. You would just have to switch it back to default when leaving that view.

24

Thanks, It worked for me to hide the ā€œbackā€ title.

25

I have an similar issue with the ion-nav-back-button on iOS and I hope someone can help me with it.
If I use the ion-nav-back-button in my nav-bar the height automatially increases on iOS. (On Android everything works fine). The problem is that the increased nav-bar is overlapping the ion-content.
I need the ng-click in the lower example so I cannot just use the upper example (only with ion-nav-title).
here are 2 examples:

<ion-view > 
  <ion-nav-title>Test2</ion-nav-title>
  <ion-content> [...]

image

Second Example:

   <ion-view> 
   <ion-nav-bar class="bar-positive bar bar-header">
        <ion-nav-back-button ng-click="myGoBack()">
	   <i class="ion-android-arrow-back"></i>
	</ion-nav-back-button>
        <ion-nav-title>Test</ion-nav-title>
   </ion-nav-bar>
   <ion-content> [...]

image

Has anyone a solution for that? Why is the nav-bar increasing if Iā€™m adding just another button?

26

I have solved this issue.
I just removed the bar-header css class and it worked

 <ion-view> 
   <ion-nav-bar class="bar-positive bar">
        <ion-nav-back-button ng-click="myGoBack()"></ion-nav-back-button>
        <ion-nav-title>Test</ion-nav-title>
   </ion-nav-bar>
   <ion-content> [...]
27

This is simply infuriating. So my solution then (as there is a forrest of poorly documented solutions that donā€™t work at all).

.back-text {
  display: none !important;
}

Anything else simply doesnā€™t work. The aptly titled but mysterious in function:

$ionicConfigProvider.backButton.previousTitleText(false);

or to be more explicit in what one wants:

$ionicConfigProvider.backButton.previousTitleText("");

This is an absolute joke, this is a very common use case (I18N to just name one).

(Frustration overload after having read half of the Ionic code base and issue after issue in order to build a relatively simple app. Ionic seems promising but has a lot more growing to do.)

1 Like
28

Hey so whats the issue?

Just gave these a try, and they do work.

Could you explain what youā€™re trying to do?

29

THANK YOU for clearing that up I was confused tryiung to use it in a controller!!

1 Like
30

vicinitysoftware your point is right on the money - hopefully this doesnā€™t turn out to be my full experience as I delve in to Ionic.

For what its worth Ionic team - look at KendoUIā€™s layouts approach. Each view defines the layout it uses or defines its own (which includes header/header buttons/footer). Very simple and intuitive.

31

joshbuchea
thanks :grinning:

1 Like
32 
        // ē¦ę­¢čæ”回后面ēš„å­—
        $ionicConfigProvider.backButton.text('').icon('ion-chevron-left');
        $ionicConfigProvider.backButton.previousTitleText(false);
33

Has anyone found a way to make the back button touchable area much bigger. I get the feeling that its small therefore not very sensitive.
thanks
Sabba

34

thanks man this work good

35

This fixed it for meā€¦

$ionicConfigProvider.backButton.text(ā€™ā€™).icon(ā€˜ion-chevron-leftā€™).previousTitleText(false);

Whoop!

However, doesnā€™t work with the iOS icon (the class for which is somewhere above this post). Iā€™ve not checked if itā€™s the correct icon class, either way it works with the ion icon.