Ion-nav-button Not Appearing

Hello Users,

Running into an issue with the ion-nav-buttons directive.
I have a default nav-bar which I define in the menu html file.

On 4 pages all I want to display is the back button but my default nav-bar is appearing on 3 of these pages. the code below works on one page but not on the rest.
I’m not sure why so looking for any assistance to resolve.

Excerpt from my menu.html:

<ion-nav-bar class="bar-dark">
  <!-- nav image -->
  <ion-nav-title>
    <img class="title-image" 
         src="assets/img/title-navbar.png">
  </ion-nav-title>

  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
    </button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-chatbubbles" 
            menu-toggle="right">
    </button>
  </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view name="menuContent"></ion-nav-view>

In the html file of page where I want to just show the back button:

<!-- navigate button -->
<ion-nav-buttons side="left">
    <button class="button button-clear ion-chevron-left" 
	 		native-transitions 
            nav-direction="back" 
			ui-sref="app.play">
	</button>
</ion-nav-buttons>

I’ve also added this config to all the controllers but did not work:
// back button for navigation
$ionicNavBarDelegate.showBackButton(true)

Any help appreciated.

Thanks

Just add $ionicNavBarDelegate.showBackButton(true); only on the controller of the page where you want to show the back button.

You can also centrally add it like:

  var path = $location.path();

  if (path.indexOf('viewname') != -1){
    $ionicNavBarDelegate.showBackButton(true);
 else
   $ionicNavBarDelegate.showBackButton(false);

Thanks for replying. I should’ve added I only set the showBackButton(true) on the page controllers I actually wanted the back button, not universally. What’s the best way to do it centrally, create it as service and inject where you need it?

On page where back button works, I added this code to the ionicView.enter function to test:

    // view entered
	$scope.$on('$ionicView.enter', function() {
		$log.info("ChattingCtrl-Enter");	
               
                // path info
		var path = $location.path();
		console.log("path: ", path);
		console.log("path.indexOf('viewname'): ", path.indexOf('viewname'));
	});

Output:
ChattingCtrl-Enter
chattingCtrl.js:247 path: /app/chatting/1487280299430/1487278036257
chattingCtrl.js:248 path.indexOf(‘viewname’): -1

On the page where the back button does not work, ionicView.enter is not firing!
Maybe this is a symptom of the problem. I added the code to the ionicView.loaded function instead:

    // view loaded
	$scope.$on('$ionicView.loaded', function() {
		$log.info("GiftCtrl-Loaded");	

		// display back button 
		var path = $location.path();
		console.log("path: ", path);
		console.log("path.indexOf('viewname'): ", path.indexOf('viewname'));

		if (path.indexOf('viewname') != -1){
			console.log("showBackButton: ", true);
			$ionicNavBarDelegate.showBackButton(true);
		} else {
			console.log("showBackButton: ", false);
			$ionicNavBarDelegate.showBackButton(false);
		}

	});

Output:
GiftCtrl-Loaded
giftCtrl.js:24 path: /app/gifts
giftCtrl.js:25 path.indexOf(‘viewname’): -1
giftCtrl.js:31 showBackButton: false

Copying what I found hoping someone has come across this before and might have a solution.

Thanks

I added a class to the ion-view tag and now the ion-nav-buttons work.
Don’t see any particular reason why though!