twitter-bootstrap 即使在 AngularJS 中使用 ng-cloak，页脚模板也会闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14927073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Footer template blinks even using ng-cloak in AngularJS
提问by Deividi Cavarzan
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.
我使用 AngularJS 从 REST 服务中检索到的一些数据成功创建和显示模板，但是，当 JSON 响应仍在加载时，浏览器在顶部显示页脚模板，当响应返回 JSON 数据时，页脚转到底部.
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 Referencerecommend.
我试过使用 ng-cloak 方法，不幸的是，问题仍然存在。我把 CSS 放到 ng-cloak 作为API 参考推荐。
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)
我尝试将 ng-cloak 放在 body 标签、ng-view、页脚以及 ng-view html 模板中。此代码代表所有尝试（注意：我尝试单独和一起使用，而不是 ng-cloak 类）
<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.
即使主 div 没有高度，是否有任何 Bootstrap 技巧可以将页脚放在底部？我试过使用 nav-fixed-bottom 标签，但我不想在页面具有高高度值时将底部固定在屏幕上。
Thanks!!!
谢谢！！！
采纳答案by Mark Rajcok
ng-cloak and/or ng-bindcan'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.
ng-cloak 和/或ng-bind不能帮助解决这个问题，因为这不是“未编译内容的闪现”问题。这些指令旨在隐藏内容，直到 Angular 有机会编译 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.
您试图解决的问题更像是：“我正在动态地向页面添加内容并且内容正在移动”。如果您只想在加载主要内容后显示页脚，我喜欢@Alex 在他的评论中提出的解决方案。
回答by Alex Osborn
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.
您是否仔细检查过是否有任何可能与 ng-cloak 规则冲突的 CSS 规则？其他样式、库等可能会发生这种情况。
If you have any rules that conflict, just adding display:none;may not be enough.
如果您有任何冲突的规则，仅添加display:none;可能还不够。
See Angularjs - ng-cloak/ng-show elements blink
参见Angularjs - ng-cloak/ng-show 元素闪烁
If this is the case, the solution is to use !important to overcome this:
如果是这种情况，解决方案是使用 !important 来解决这个问题：
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
回答by Omid Sakhi
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.
正如亚历克斯和马克所说，在这种情况下 ng-cloak 没有提供任何好处。但是，我使用了一些对我有用的东西，也可以帮助其他人。
Initially, I don't display the footer.
最初，我不显示页脚。
.footer {
display: none;
}
then after the Angular is done with loading the content, the footer appears.
然后在 Angular 完成加载内容后，会出现页脚。
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});
