AngularJS ng-cloak用法及代碼示例

很多時候，AngularJS應用程序會在主應用程序啟動時顯示HTML文檔的閃爍。這將顯示AngularJS代碼一段時間。 ng-cloak指令的使用是為了防止AngularJS中的元素在短時間內以未完成，不完整，未編譯和原始的形式被Web瀏覽器呈現，同時基本程序仍處於加載的邊。本質上，這是為了防止不必要的閃爍影響，該影響在程序加載開始時就多次顯示。然後，未完成的數據隻是保留並等待傳入的數據。

用法:

<element ng-cloak> {{the piece of code}} </element>

例：本示例顯示了ng-cloak指令的用法。

<!DOCTYPE html> 
<html> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
</script> 
    <head> 
        <title>AngularJS | ng-cloak Directive</title> 
    </head> 
     
<div ng-app=""> 
            <body style = "text-align:center"> 
            <h2 style = "color:green">GeeksForGeeks</h2> 
            <h2 style = "color:purple">AngularJS ng-cloak</h2> 
  
            <p ng-cloak>{{ 10 + 10 }}</p> 
  
</body> 
</div> 
</html>

輸出：
當我們加載代碼時：
ngcut

即使不包含ng-cloak指令，此示例也肯定會加載而不會閃爍。但這告訴我們如何在HTML元素中包含ng-cloak指令。

相關用法

注：本文由純淨天空篩選整理自SohomPramanick大神的英文原創作品 AngularJS | ng-cloak Directive。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。