ngShow flashing hidden div Ionic View


#1

I have the following html in my template:

<div id="logReg" ng-show="loginRegister" ng-include="'templates/login-register.html'"></div>
<div  id="forms" ng-show="!loginRegister">
  <div ng-show="oauth" ng-include="'templates/oauth-auth.html'"></div>
  <div ng-include="'templates/local-auth.html'"></div>
</div>

In the login-register.html template, I have a button that toggles $scope.loginRegister. When I click the button, both templates appear on the page for half a second before transitioning completely to the second template. See this short clip:

When I try this in a browser or iOS simulator, I don’t see this behavior, but when I try it in Ionic View, I do. Is it because I use the ng-includes perhaps? Should I change the animations for ngShow?

Any help would be great. Thanks!


#2

Fir readability you could use

ng-hide="loginRegister"

Regarding your problem, have you tried using ng-cloak?