ng-cloak未解决Angularjs UI Bootstrap选项卡集的初始闪烁问题
ng-cloak未解决Angularjs UI Bootstrap选项卡集的初始闪烁问题
提问于 2015-05-11 14:39:22
我正在使用Angularjs UI Bootstrap Tab set。为了避免选项卡名的初始闪烁问题，我使用了ng-cloak，但令人惊讶的是，仍然会出现初始闪烁。我想这是因为我有大量的html内容。有没有人能提出解决这个问题的建议？下面是我的标签集，标签名称导致了初始闪烁问题。
<body >
<div class="splash" ng-controller="ApplicationController" ng-cloak>
<p>Please wait while loading!</p>
</div>
<div id="content" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
<tabset>
<tab ng-repeat="eachTab in chartsTabs" heading="{{eachTab.tabName}}" select="createChartsPerTab(recordsSet, eachTab)"> </tab>
</tabset>
</div>
</body>下面是我使用ng-cloak的一段代码：
<div id="splash" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>在我的自定义css文件中，我有：
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}回答 3
Stack Overflow用户
发布于 2015-05-11 14:54:25
您还应该在另一个容器上放置一个ng-cloak指令。也就是说。
<body ng-controller="ApplicationController">
<!-- Please note that this splash is a separate div beside the main div -->
<div class="splash" ng-cloak>
<p>Please wait while loading!</p>
</div>
<!-- and here comes your content div -->
<div id="content" ng-controller="ContentController" ng-cloak>
<!-- everything else here -->
</div>
</body>您的自定义css如下所示：
/* this css rule is to hide everything with the ng-cloak directive */
[ng-cloak] {
display: none !important;
}
/* this css rule displays the splash element if the ng-cloak directive is active */
[ng-cloak].splash {
display: block !important;
}
/* just style your splashscreen */
.splash {
position: absolute;
background-color: #ededed;
color: #ffffff;
display: none;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 5000;
}
.splash p {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 20px;
text-align: center;
margin: auto;
}Stack Overflow用户
发布于 2015-05-11 14:57:36
我建议的是，由于您的标签名称具有闪烁效果，问题出在指令级别，您可以修改指令标签的模板html，以便在标签名称出现的任何位置包含一个ng-cloak。
Stack Overflow用户
发布于 2015-11-13 01:17:18
ng-cloack在angularjs库未完全加载之前无法使用。尝试使用ng-include指令，因为它只会在angularjs库加载并编译所有内容后显示内容。
例如：
<html lang="en" ng-app="myApp">
<body ng-cloak ng-controller="YourController">
<div class="container">
<div ng-include="'templateWhichIsCompletelyCompiled.html'"></div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30161038
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号