Home/ Questions/Q 9310089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T01:01:35+00:00

I’m sucessful create and display templates with some data retrieved from REST service using

  • 0

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!!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0