So, I have this pop-up that should be hidden by default by an ng-show, until a button is pressed. My problem is that when navigating to these pages without a hard refresh, the pop up is initially shown and then fades out.
What I think is happening is that for some reason the ng-show initially evaluates to true, or maybe the angular hasn't actually been compiled yet, so the pop-up would normally be shown and immediately hidden, but because of the 0.5s transition, it has to fade out instead.
Anyone have any ideas why this is happening, or ways around it?
HTML:
<div class="test-fade" ng-show="completeAll">
<p>You are about to complete some stuff</p>
<button ng-click="doStuff()">Complete</button>
<button ng-click="completeAll = false">Cancel</button>
</div>
<button ng-click="completeAll = true">
<i class="fa fa-check"></i>
</button>
CSS:
.test-fade{
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.test-fade.ng-hide{
opacity:0;
}
JS Controller:
$scope.completeAll = false
Because I set the completeAll variable to false initially in my controller, I have a sinking feeling this problem stems from angular's compiling order or some other equally scary angular intricacy. Hope you guys can help!
