ng斗篷无法使用Angularjs UI引导选项卡集解决初始闪烁问题_Angularjs_Angularjs Directive_Angular Ui_Angular Ui Bootstrap_Angular Bootstrap

ng斗篷无法使用Angularjs UI引导选项卡集解决初始闪烁问题

angularjs

ng斗篷无法使用Angularjs UI引导选项卡集解决初始闪烁问题,angularjs,angularjs-directive,angular-ui,angular-ui-bootstrap,angular-bootstrap,Angularjs,Angularjs Directive,Angular Ui,Angular Ui Bootstrap,Angular Bootstrap,我正在使用Angularjs UI引导选项卡集。为了避免初始闪烁问题，对于选项卡名称，我使用了ng斗篷，但令人惊讶的是，初始闪烁仍然出现。我想这是因为我有大量的html内容。有人能提出解决办法吗？以下是我的选项卡集，选项卡名称导致初始闪烁问题 <body > <div class="splash" ng-controller="ApplicationController" ng-cloak> <p>Please wait while loadin

我正在使用Angularjs UI引导选项卡集。为了避免初始闪烁问题，对于选项卡名称，我使用了ng斗篷，但令人惊讶的是，初始闪烁仍然出现。我想这是因为我有大量的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-clope指令。即

<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>

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

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>

我不完全理解，我使用的tab指令直接来自Angularjs UI引导。你能提供一些解决方案的示例代码吗？我已经编辑了我的问题，我正在div中应用ng-clope作为完整的应用程序，在body标记之后，但是，你的splash应该是一个不同于content元素的元素，正如你在我的示例中看到的那样。在你的主要内容之前放一个div，上面写着你正在加载的内容。我已经按照你的指示编辑了我的问题，但这并不能解决问题。现在发生的事情是，首先我收到一条消息“请等待加载！”一小部分秒，然后选项卡名称继续闪烁1秒。是否仍要用ng bind替换标题=“{{eachTab.tabName}}”？我不确定它是否能解决问题。嗯，我做了一点调查。你在哪里加载你的javascript文件？如果它们在一开始，可能会出现闪烁。如果在html页面的末尾有脚本，只要angular不可用，就会显示splash图像。

<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>

/* 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;
}

<html lang="en" ng-app="myApp">
  <body ng-cloak ng-controller="YourController">
    <div class="container">
      <div ng-include="'templateWhichIsCompletelyCompiled.html'"></div>
    </div>
  </body>
</html>