While doing the final on-device testing for the new release of Kids In Touch, I kept seeing something pretty strange. My "Back" button was disappearing in certain parts of the app. On desktop and on the simulator, this never happened. On device, it was happening about 60% of the time.

Argh... The stranger thing was that this only happened on one specific view. I reviewed the code over and over and found no reason for it. Finally, I resorted to putting this bit of code into the controller for that view:

$ionicNavBarDelegate.showBackButton(true)

Tada. All was fixed ... or not. More testing revealed 2 more pages that the Back button would disappear on. Then, I discovered that on older devices (iPhone 4 running iOS 7), it happened on even more pages. Ugh.

Shameless Plug : Kids In Touch - Training Wheels for Texting

I really didn't want to go and add that code to all of my controllers. So, I cheated. It put this in the $stateChangeSuccess event listener in the apps .run section.

$rootScope.$on('$stateChangeSuccess', function() {

	if(toState.name.indexOf('main') !== -1) {
		$ionicNavBarDelegate.showBackButton(true);
	}

});

Now, every time the state changes, the showBackButton method is called to force the back button in place. It works like a charm.

Now, I don't really believe this is the ideal solution. However, at the time, I didn't have time to figure out the cause. I think it has something to do with the animation of the ion-nav-bar. When the view-title is interpolated rather than hardcoded, I think this tends to happen more. I have another app that NEVER has this problem.

Anyone else seeing this behavior in their Cordova/PhoneGap hybrid app?