AngularJS如何使用ng-cloak指令？代码示例

2021年3月25日13:03:23 发表评论 958 次浏览

很多时候, 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" >lsbin</ h2 >
             < h2 style = "color:purple" >AngularJS ng-cloak</ h2 >
  
             < p ng-cloak>{{ 10 + 10 }}</ p >
  
</ body >
</ div >
</ html >

输出如下：

当我们加载代码时：