如何在AngularJs中实际使用ng-Cloak指令？
ng-cloak指令是什么？- 我们为什么要用它？
回答 3
Stack Overflow用户
发布于 2015-02-14 10:22:34
五斗篷
从医生那里：
ngCloak指令用于防止浏览器在加载应用程序时以其原始(未编译)形式简要显示角html模板。使用此指令可避免因html模板显示而产生的不受欢迎的闪烁效果。
简而言之，您可以使用ng-cloak指令来防止显示未编译的元素。未编译的元素可以是保存和等待传入数据的元素：
<div ng-cloak>{{myvar}}</div>如果myvar控制器仍未编译或数据未填充，则ng-cloak将阻止显示{{myvar}}，并且只在编译变量时显示div。
按照下面的代码示例，检查是否带有结果和不带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
});
});
});
}]); Stack Overflow用户
发布于 2015-12-02 09:03:01
所给出的使用ng斗篷Ben的理由是有效的，但是Ben提供的示例的结果在某些情况下仍然会显示{{var}}。当脚本通常以异步方式加载或放置在任何html主体的底部时，这一点在野外尤其适用。
在本的例子中，他将一个<style>放在顶部，但不使用它，我们应该像这样将ng斗篷类放在<body>上，然后使用这个样式：
<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...这样，主体标记的内容将不会显示，直到角度变化ng斗篷为display: block或指令更新标记的html。
添加该类的原因是因为在html显示之后解析了ng-cloak指令，所以您的JS线程始终有可能死掉，并且仍然显示类似{{something here}}的任何内容。
正确使用的一个很好的例子是将class="ng-cloak"和ng-cloak指令包含在ng-repeat指令中。
但是，如果它只是{{}是烦人的，否则即使JS线程崩溃，页面也是可以的，那么最好在标记上使用ng-bind，而不是在标记中添加{{}}。
Stack Overflow用户
发布于 2017-09-08 07:02:01
我想补充的一点是，我在大多数应用程序中都看到了，仅仅添加ng斗篷是行不通的。这是因为该页面可能更大，而js直到那时才被加载。
为这个指令应用手动CSS的在这里会有帮助-
[ng-cloak]
{
display: none !important;
}希望这能帮上忙！
https://stackoverflow.com/questions/28514567
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号