Question

我正在使用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;
}

Answer 1

您还应该在其他容器上放置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;
}

Answer 2

我建议的是，由于您的标签名称具有闪烁效果，问题出现在指令级别，您可以修改指令标签的模板html，以便在标签名称的任何位置包含ng-cloak出现。

Answer 3

在angularjs库未加载完成之前，无法使用

ng-cloack 。尝试使用指令 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>

ng-cloak没有解决Angularjs UI Bootstrap tabset的初始闪烁问题

3 个答案: