即使在 AngularJS 中使用 ng-cloak，页脚模板也会闪烁 [英] Footer template blinks even using ng-cloak in AngularJS
问题描述
我使用 AngularJS 从 REST 服务中检索到的一些数据成功创建和显示模板，但是，当 JSON 响应仍在加载时，浏览器会在顶部显示页脚模板，当响应返回 JSON 数据时，页脚会显示到底部.
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.
我尝试过使用 ng-cloak 方法，不幸的是，问题仍然存在.我按照 API 参考的建议将 CSS 放到 ng-cloak 中.
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.
这是我的应用代码:
<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>
我尝试将 ng-cloak 放在 body 标签、ng-view、页脚以及 ng-view html 模板中.这段代码代表了所有的尝试(注意:我尝试单独和一起使用，而不是 ng-cloak 类)
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?
是否有任何 Bootstrap 技巧可以将页脚放在底部，即使主 div 没有高度?我试过使用 nav-fixed-bottom 标签，但我不想在页面具有高高度值时将底部固定在屏幕上.
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.
谢谢！！！
推荐答案
ng-cloak 和/或 ng-bind 无法帮助解决这个问题，因为这不是未编译内容的闪存"问题.这些指令旨在隐藏内容，直到 Angular 有机会编译 HTML.
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.
您要解决的问题更像是:我正在动态地向页面添加内容，但内容正在移动".如果你只想在加载主要内容后显示页脚，我喜欢@Alex在他的评论中提出的解决方案.
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.
这篇关于即使在 AngularJS 中使用 ng-cloak，页脚模板也会闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
