【问题标题】：How to use the actual use of ng-Cloak directive in AngularJs?如何在AngularJs中实际使用ng-Cloak指令？
【发布时间】：2015-02-14 10:16:33
【问题描述】：

什么是ng-cloak 指令？
我们为什么要使用它？

【问题讨论】：

你见过超人克拉克肯特和他的史诗般的动作，他解开衬衫的扣子，在黑暗的小巷里露出他的西装。现在，如果他在他还没有完全脱下衣服的时候穿过整条小巷，变成一个穿着闪亮西装，外面套着内衣的超级英雄，哎呀。所以漫画家确保小巷足够长，不会发生那种不幸。是的，这里的胡同是我们心爱的 ngcloak，clark kent 是 html，而超人显然是 angularjs。 ;)
这可能会有所帮助code-sample.com/2015/02/ng-cloak-directive-in-angularjs.html
@AnilSingh 你好，Anil，你能帮忙解决这个剑道问题吗stackoverflow.com/questions/61334924/…

标签： angularjs directive

【解决方案1】：

ng-斗篷

来自文档：

ngCloak 指令用于防止 Angular html 模板在加载应用程序时被浏览器以原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。

简而言之，您可以使用ng-cloak 指令来防止显示未编译的元素。未编译的元素可以是持有并等待传入数据的元素：

<div ng-cloak>{{myvar}}</div>

如果 myvar 控制器仍未编译或数据未填充 ng-cloak 阻止显示 {{myvar}} 并且仅在编译变量时显示 div。

按照此代码示例并检查results 有和没有ng-cloak：

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

<body ng-controller="MyController" ng-cloak>
    <h3>ngCloak Example</h3>
        <ol >
            <li ng-repeat="item in myData">
                {{item.title}}
            </li>
        </ol>
</body>


var myApp= angular.module("myApp",['ngResource']);

myApp.controller("MyController", ["$scope", "$resource","$timeout",
    function($scope,$resource,$timeout){
        $scope.myData =[];

        var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");

        youtubeVideoService.get()
            .$promise.then(function(responseData) {
        
        angular.forEach(responseData.data.items,
            function(aSingleRow){
                console.log(aSingleRow);
                $scope.myData.push({
                    "title":aSingleRow.title
                }); 
            });
        }); 
}]);

【讨论】：

你什么时候不想拥有 ng-cloak？似乎没有缺点

【解决方案2】：

使用 ng-cloak Ben 的理由是有效的，但是 Ben 提供的示例的结果在某些情况下仍会显示 {{var}}。当脚本通常异步加载或放置在任何 html 正文的底部时，尤其如此。

在 Ben 的示例中，他将 <style> 放在顶部但不使用它，我们应该将 ng-cloak 类放在 <body> 上，就像这样，并使用该样式：

<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...

这样在 Angular 将 ng-cloak 更改为 display: block 或指令更新标记的 html 之前，body 标记的内容不会显示。

添加类的原因是因为 ng-cloak 指令是在显示 html 之后解析的，所以你的 JS 线程总是有可能死掉并且仍然显示像 @987654326 这样的东西@。

正确使用的一个很好的例子是在ng-repeat 指令中包含class="ng-cloak" 和ng-cloak 指令。

但是，如果它只是令人讨厌的 {{}}，否则即使 JS 线程崩溃，页面也很好，最好在标签上使用ng-bind，而不是在其中添加{{}}。

【讨论】：

【解决方案3】：

我想补充一点—— 我已经看到了大多数应用程序，只是添加 ng-cloak 是行不通的。这是因为该页面可能更大，并且 js 直到那个时候才被加载。

为此指令手动应用 CSS 会有所帮助 -

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

希望这对某人有所帮助！

【讨论】：