ng-cloak沒有解決Angularjs UI Bootstrap標籤集的初始閃爍問題

我正在使用Angularjs UI Bootstrap標籤集。爲了避免初始閃爍問題，使用標籤名稱，我使用了ng-cloak，但出人意料的是仍然出現了最初的閃爍。我想這是由於我擁有大量的html內容。任何人都可以爲此提出任何解決辦法嗎？以下是我的選項卡集，選項卡名稱引起初始閃爍問題。ng-cloak沒有解決Angularjs UI Bootstrap標籤集的初始閃爍問題

<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-披風我的一段代碼：

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

來源

2015-05-11 Madasu K

你也應該把NG-斗篷指令在你的其他容器上。即

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

來源

2015-05-11 06:54:24

我已經編輯我的問題，我申請NG-斗篷在DIV的全面應用，機身標籤 –

後立即但是，你飛濺應該比你的內容的不同元素元素，你可以在我的例子中看到。在您的主要內容之前放入一個帶有您的加載內容的div。 –

我按照您的指示編輯了我的問題，但它不能解決問題。現在發生的事情是，首先我收到一條消息：「請稍候，正在加載！」幾秒鐘，然後選項卡名稱閃爍持續1秒。 –

我的建議是，因爲你的卡名稱被視爲與閃爍效果，這個問題是在指令級，你可以修改你的指令選項卡的模板html以在顯示選項卡名稱的任何位置包含ng-cloak。

來源

2015-05-11 06:57:36

我完全不明白，我使用的Tab指令直接來自Angularjs UI Bootstrap。您能否根據您的解決方案提供一些示例代碼？ –

ng-cloack直到angularjs庫沒有加載completeley時才能使用。嘗試使用指令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>

來源

2015-11-12 17:17:18 oezkany

ng-cloak沒有解決Angularjs UI Bootstrap標籤集的初始閃爍問題

回答

相關問題