在現有的應用程序中究竟使用ngCloak

我們有一個AngularJS應用程序（不是SPA）。我們面臨這個問題，其中一部分未編譯模板顯示爲短暫時刻，所以我正在將ngCloak指令應用於應用程序。在現有的應用程序中究竟使用ngCloak

我不確定應該在哪裏使用這個指令 - 每一個小的元素或大的部分（或其他地方）。我目前所做的是通過Chrome開發工具以非常低的速度節制連接，然後檢查模板的哪些部分顯示爲原始狀態。但我覺得這不是一個非常確定的方法。

所以我想知道在哪裏使用ngCloak。

謝謝。

你應該preffer [NG-綁定（HTTPS：/ /docs.angularjs.org/api/ng/directiv e/ngBind）在'{{}}''上，所以不需要ng-cloak。 – AntiHeadshot

@AntiHeadshot我們已經使用ngBind並且沒有'{{}}'。 –

應用ngCloak到每個小元素是肯定的錯誤的路要走。

您通常希望將其應用於大型部分或應用於使用Angular的頁面的整個部分。目標是隱藏頁面的這些部分，直到Angular準備好使用。

該指令可以被應用到<body>元素，但首選的用法是將多個ngCloak指令到頁面的一小部分，以使瀏覽器的逐步呈現視圖。

如果你不希望你的用戶在看空白，則可以顯示加載動畫，直到角加載完畢。您可以通過給元素的ng-show="false"指令做到這一點：

<img src='/images/loading.gif' ng-show='false' />

2015-12-21 12:44:39 JLRishe

完全正確.. – Maher

是否有廣泛使用ngCloak的性能影響？ –

@HarshilSharma ngCloak通過使用CSS規則隱藏頁面上的東西，直到Angular完成加載。所以如果你使用它一噸，它可能會對性能產生一些影響，但可能不是很多。找出最好的方法就是試試看。 – JLRishe

請添加以下代碼的index.html

<style> 
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
     display: none !important; 
    } 
</style>

的頭部分，你可以添加相同的代碼到你的CSS文件

感謝

2015-12-21 12:44:38 Dineshaws

沒有[NG-披風]當您angularJs之前運行你的應用程序的渲染，你會看到類似「{{myngModel}}一些角碼或類似這樣的東西，當你把[NG-斗篷]在運行項目，你沒有看到這些代碼，直到呈現完整

[ng\:cloak], 
 
[ng-cloak], 
 
[data-ng-cloak], 
 
[x-ng-cloak], 
 
.ng-cloak, 
 
.x-ng-cloak { 
 
    display: none !important; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <title>app</title> 
 
</head> 
 

 
<body ng-cloak> 
 
</body> 
 

 
</html>

2015-12-21 12:47:58 Maher

回答