NG-斗篷

Question

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

Answer 1

NG-斗篷

来自文档：

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

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

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

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

请按照此代码示例，使用和不使用ng-cloak检查results：

<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
                }); 
            });
        }); 
}]);

Answer 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标记的内容。

添加类的原因是因为在显示html之后解析了的ng-cloak指令，所以总是有可能你的JS线程死了并且仍然显示{{{ 1}}。

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

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

Answer 3

我想补充一点 - 我已经看到大多数应用程序，只是添加ng-cloak不起作用。因为该页面可能更大，并且在此之前不会加载js。

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

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

希望这会对某人有所帮助！

如何在AngularJs中使用ng-Cloak指令的实际使用？

3 个答案:

NG-斗篷