Ng-show/hide on icons produces flicker in nav bar

ionic-v1
1

I have a nav action button that is supposed to be a toggle. I’m using the code below:

<ion-nav-buttons side="right">
  <button ng-hide="hasJoined" class="button button-icon button-clear ion-ios7-plus-outline" ng-click="hasJoined = !hasJoined"></button>
  <button ng-show="hasJoined" class="button button-icon button-clear ion-ios7-checkmark" ng-click="hasJoined = !hasJoined"></button>
</ion-nav-buttons>

The issue is that when you click (or tap on iOS) one of the buttons, it displays the other button below it for a moment before replacing the initial button. Here’s a 5 second demonstration of the issue:

https://dl.dropboxusercontent.com/u/24211329/ionic-nav.mov

Any help or another idea on how to go about this would be greatly appreciated!

2

Ok, so I just decided to go with a dirty solution for now. Basically I have ng-show/hide on the buttons so that correct one loads when the page loads, but then I more or less do ng-hide manually to make it work.

<ion-nav-buttons side="right">
  <button ng-hide="hasJoined" id="join" class="button button-icon button-clear ion-ios7-plus-outline" ng-click="btnTransition()"></button>
  <button ng-show="hasJoined" id="joined" class="button button-icon button-clear ion-ios7-checkmark" ng-click="btnTransition()"></button>
</ion-nav-buttons>

And then the function code:

$scope.btnTransition = function() {
    	document.getElementById('join').classList.add( "ng-hide" );
    	document.getElementById('joined').classList.add( "ng-hide" );
    	$scope.hasJoined = !$scope.hasJoined;
    	if($scope.hasJoined){
    		document.getElementById('joined').classList.remove( "ng-hide" );
    	}
    	else {
    		document.getElementById('join').classList.remove( "ng-hide" );
    	}
}

Anyway, perhaps this hack will help someone else trying to quickly deal with this problem.

3

Try using ng-cloak on the button

4

This is still an issue in RC0. I’m not sure why there’s such a delay in evaluating ng-show/hide inside an Ionic Nav Bar, but there still is.

5

Alas, this doesn’t help.

6

I have the same problem with my android device. works find on ionic serve.