ng-if在頁面加載時出現ng-if

在我的頁面中，我有一個div內ng - 如果有一些腳本加載，即當頁面沒有完全加載。div是可見的。除非頁面/角度完全加載，否則我如何隱藏它。ng-if在頁面加載時出現ng-if

<div id = "menu" ng-if="someCondition" > 
    <ul class="user-menu"> 
     <li> 
      menu item 1 
     </li> 
     <li> 
      menu item 2 
     </li> 
    </ul> 
</div>

來源

2015-02-09 Hmahwish

查看ng-cloak的文檔。

從文檔：

的ngCloak指令用於防止角HTML模板通過在其原始（未編譯）形式的瀏覽器，而你的應用程序加載，略微顯示。使用此指令可以避免由html模板顯示引起的不良閃爍效應。

另外：

該指令可以被施加到元件，但優選用途是應用多個ngCloak指令到頁的一小部分，以允許瀏覽器視圖的漸進式渲染。

<div id = "menu" ng-if="someCondition" ng-cloak> 
    <ul class="user-menu"> 
     <li> 
      menu item 1 
     </li> 
     <li> 
      menu item 2 
     </li> 
    </ul> 
</div>

工作原理：

以下樣式應用到文檔（angular.js文件基本上充當.css文件）angular.js加載時（這是推薦在你的頁面的頭部）。當角度實際上在DOM負載上運行時，它將刪除ng-cloak屬性，從而消除元素。

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

如果沒有加載文檔的頭部角度，這時你可以手動添加樣式的頭，一切都將仍然工作。只需添加

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

來源

2015-02-09 05:09:40

這是一個猜測，由於你只提供了一小段代碼，但我的猜測是，該控制器尚未初始化（罩角度將通過你的HTML DOM解析，當它採取相應的行動下的事實被稱爲）。

如果您使用簡單的路線，這將完全防止這種情況。

另外，你可以把所有的ng-if條件都放到css顯示中：none;然後在應用完成加載後遍歷所有這些文件

來源

2015-02-09 05:09:12

應用於身體元素的ng-cloak會自動進行替代。 – 2015-02-09 05:14:39

假設angular實際上加載了指定頁面/角度的問題，所以在角度仍在下載的情況下（緩慢的互聯網連接，未壓縮的角度，來自同一CDN的許多其他腳本等以及本地網絡上的測試服務器）那麼在角度引導程序下載並解析之後，ng-cloak將無法運行。使用簡單的路由將是最簡潔的方式，因爲這種方式除非一切都被初始化了，否則模板不能被加載，否則手動滾動的方法仍然可以工作。 – 2015-02-09 05:16:37

如果包含角度。js在文檔的頭部（推薦）它會自動執行（在角度「運行」之前，這發生在DOM已經加載之後），它通過完全按照你的建議做到這一點（添加顯示：無風格，影響任何元素一個ng-cloak屬性，然後在DOM被角度解析後刪除樣式 – 2015-02-09 05:25:20

使用條件運算符。

<div id="menu" ng-if="someCondition.length > 0 ? true : false"> 
    <ul class="user-menu"> 
     <li> 
      menu item 1 
     </li> 
     <li> 
      menu item 2 
     </li> 
    </ul> 
</div>

來源

2015-02-09 05:13:04 squiroid

ng-if在頁面加載時出現ng-if

回答

相關問題