Footer template blinks even using ng-cloak in AngularJS

Question

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

Answer 1

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;
}

Answer 2

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);
    });
 });

Answer 3

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.