Menu
I'm sucessful create and display templates with some data retrieved from REST service using AngularJS but, when JSON response is still loading, the browser show the footer template at the top and, when response return the JSON data, the footer goes to the bottom.
This occurs very quickly, but the footer template blinks at the top of the page before goes to the bottom.
I've tried using the ng-cloak approach, unfortunately, the problem still happening. I put the CSS to ng-cloak as the API Reference recommend.
Here is my app code:
<body>
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>
I try put the ng-cloak on body tag, ng-view, footer, and also inside the ng-view html template. This code represents all attempts (Note: I've try to use separately and together, with ng-cloak class and not)
<body ng-cloak class="ng-cloak">
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ng-cloak class="ng-cloak"></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>
Unfortunately after all these changes, the footer template still blink on top before loading is complete.
Anyone can help me to fix this?
Is any Bootstrap trick to put the footer on bottom, even when the main div is without height? I've tried use the nav-fixed-bottom tag but I dont want to have the bottom fixed on screen when the page has high height values.
Thanks!!!
983
Have you double checked whether you have any CSS rules that may be conflicting with the ng-cloak rule? This could happen with other styles, libraries etc.
If you have any rules that conflict, just adding display:none; may not be enough.
See Angularjs - ng-cloak/ng-show elements blink
If this is the case, the solution is to use !important to overcome this:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
As Alex and Mark said, ng-cloak doesn't provide any benefit in this case. However I used something that worked for me and may also help others.
Initially, I don't display the footer.
.footer {
display: none;
}
then after the Angular is done with loading the content, the footer appears.
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});
ng-cloak and/or ng-bind can't help solve this problem, because this is not a "flash of uncompiled content" problem. Those directives are meant to hide content until Angular has had a chance to compile the HTML.
The problem you are trying to solve is more like: "I'm adding stuff to the page dynamically and stuff is moving around". If you want to show the footer only after the main content is loaded, I like the solution @Alex presented in his comment.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
