Recently, I encountered an issue with my code snippet:
<body>
<ng-view></ng-view>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="https://raw.githubusercontent.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<script src="js/services.js"></script>
<script src="js/router.js"></script>
<script src="js/interceptor.js"></script>
<script src="js/controller.js"></script>
<script src="js/app.js"></script>
</body>
The content loaded in ng-view looks something like the following:
<ng-include src="'templates/navigation.html'"></ng-include>
<ng-include src="'templates/head-bar.html'"></ng-include>
<div id="main">
<h2>{{ controller.var }}</h2>
<div ng-show="!controller.othervar" ng-cloak>Text..</div>
</div>
However, upon page reload, the ng-show element sometimes flickers (briefly shown).
Attempts at Resolution
I have made various attempts to address this issue:
- adding the ng-cloak tag
- including the CSS code from the documentation in my stylesheet
- embedding the CSS code from the documentation in my index.html (head-tag)
- trying different placement of script-tags (e.g., moving them into the head section)
- testing the application in alternative browsers (such as Firefox and Safari)