即使在AngularJS中使用ng-cloak，页脚模板也会闪烁
我成功地使用AngularJS创建和显示了一些从REST服务中检索到的数据的模板，但是，当JSON响应仍在加载时，浏览器会在顶部显示脚注模板，当响应返回JSON数据时，脚注会转到底部。
这种情况发生得非常快，但是页脚模板在转到底部之前会在页面顶部闪烁。
我尝试过使用ng-cloak方法，不幸的是，问题仍然存在。我按照API Reference的建议将CSS放到ng-cloak中。
下面是我的应用代码：
<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、footer上，也放在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>不幸的是，在所有这些更改之后，页脚模板在加载完成之前仍然在顶部闪烁。
有人能帮我解决这个问题吗？
有没有什么Bootstrap技巧可以把页脚放在底部，即使主div没有高度？我尝试过使用nav- fixed bottom标签，但我不想在页面高度值较高时将底部固定在屏幕上。
谢谢！
回答 3
Stack Overflow用户
发布于 2013-02-19 23:44:28
ng-cloak和/或ng-bind不能帮助解决这个问题，因为这不是“闪存未编译内容”的问题。这些指令的目的是隐藏内容，直到Angular有机会编译HTML。
你试图解决的问题更像是：“我正在动态地向页面添加内容，而内容正在移动”。如果你想在主要内容加载后才显示页脚，我喜欢@Alex在他的评论中提出的解决方案。
Stack Overflow用户
发布于 2013-02-18 11:13:33
您是否仔细检查过是否有任何CSS规则可能与ng-cloak规则冲突？这可能会发生在其他样式、库等上。
如果您有任何冲突的规则，仅仅添加display:none;可能是不够的。
请参阅Angularjs - ng-cloak/ng-show elements blink
如果是这种情况，解决方案就是使用！重要的来克服这一点：
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}Stack Overflow用户
发布于 2015-03-24 22:46:03
正如Alex和Mark所说，ng-cloak在这种情况下不会提供任何好处。然而，我使用的东西对我来说是有效的，也可能对其他人有帮助。
最初，我不显示页脚。
.footer {
display: none;
}然后，在Angular加载完内容之后，页脚就会出现。
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});https://stackoverflow.com/questions/14927073
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号