Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
383 views
in Technique[技术] by (71.8m points)

javascript - Footer template blinks even using ng-cloak in AngularJS

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...