隱藏尖括號直到JavaScript的加載

Question

我有HTML的幾位像

<p class="noresults">{{numberOfContacts}} Results Are Available</p> 

是否有可能對我來說，隱藏{{numberOfContacts}}直到角加載？所以它只會說Results Are Available

我似乎有一些解決方案，如隱藏整個身體，直到Angular已經加載，但我寧願不這樣做，如果可能的話。

Answer 1

是的，請使用ng-cloak。只需添加class="ng-cloak"或ng-cloak的元素像這樣

使用指令<div ng-cloak></div>

使用類<div class="ng-cloak"></div>

它只是與display: none !important一組CSS規則和角已使你的DOM它消除了NG-斗篷所以元素是可見的。

Answer 2

使用<span ng-bind="numberOfContacts" />，而不是{{numberOfContacts}}

Answer 3

有時，即使我用了ng-cloak，我仍然可以看到括號幾秒鐘。添加以下樣式解決了我的問題：

[ng-cloak] 
{ 
    display: none !important; 
} 

有關更多說明，請參閱此鏈接link。

希望它能幫助：d

Answer 4

可以使用NG綁定，而不是表達的一樣

<span ng-bind="data"></span> 

Answer 5

這通常是隻有一個問題上很慢，設備複雜的內容時。在這些情況下，當瀏覽器在文檔中顯示HTML時AngularJS解析HTML，準備好並處理指令時可能會有一小段時間。在這段時間內，您定義的任何內聯模板表達式都將對用戶可見。現在大多數設備都有相當不錯的瀏覽器，足以快速防止這種問題。有兩種方法可以解決問題。

1. 避免使用內聯模板表達式並堅持使用ng-bind指令。
2. （最好）使用ng-cloak指令，它會隱藏內容，直到Angular完成處理。基本上，ng-cloak指令使用CSS隱藏元素，並在內容處理完成後刪除CSS類，以確保用戶永遠不會看到模板表達式的{{和}}字符。 要考慮的一個策略是直接將ng-cloak用於body元素，這將確保用戶在AngularJS加載時看到空瀏覽器。但是，通過將其應用於內嵌表達式的文檔部分，您可以更具體。

我看到ng-cloak在添加到元素時無法正常工作。在過去，我通過簡單地將ng-cloak類添加到元素來解決此問題。