Javascript 如何正确使用 ng-cloak 指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29339293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to correctly use ng-cloak directive?
提问by Kotaro
Somehow, ng-cloak in AngularJS doesn't work. I want to hide {{ }} while loading the page. Because it looks awful.
不知何故，AngularJS 中的 ng-cloak 不起作用。我想在加载页面时隐藏 {{ }}。因为它看起来很糟糕。
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Sample</title>
</head>
<body ng-model="isShow" ng-init="isShow=true">
<p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
<p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
回答by Yasser Shaikh
Add this css from here
从这里添加这个css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and use either the class name or attribute on your parent div or anywhere you have defined your app.
并在您的父 div 或您定义应用程序的任何地方使用类名或属性。
eg:
例如：
<div ng-app="Random" class="ng-cloak">
</div>
回答by GregL
From the Angular docs:
来自Angular 文档：
For the best result, the
angular.jsscript must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
为获得最佳效果，
angular.js脚本必须加载在 html 文档的 head 部分；或者，上面的 css 规则必须包含在应用程序的外部样式表中。
回答by m0meni
You have to specify these rules in your CSS:
您必须在 CSS 中指定这些规则：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
回答by kenhow
Using ngBind should eliminate that as well (I develop in SharePoint sometimes and ngCloak won't work).
使用 ngBind 也可以消除这种情况（我有时在 SharePoint 中开发，但 ngCloak 不起作用）。
AngularJS Docs:
AngularJS 文档：
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
An alternative solution to this problem would be using the ngCloak directive.
如果模板在 Angular 编译之前以原始状态暂时显示在浏览器中，则最好使用 ngBind 而不是 {{ expression }} 。由于 ngBind 是一个元素属性，它使用户在页面加载时不可见绑定。
这个问题的另一种解决方案是使用 ngCloak 指令。
JS:
JS：
var app = angular.module('test', []);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.test = "Hello World";
}]);
HTML:
HTML：
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<h1 ng-bind="test"></h1>
</body>
</html>
回答by squiroid
Add below in your css file:-
在您的 css 文件中添加以下内容：-
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
回答by Rolintocour
In my case, I figured that my troubles was dues to pending ajax requests. Ng-cloak probably works for static content, but if a template depends an ajax data then this is thus rendered before receiving the ajax response.
就我而言，我认为我的麻烦是由于未决的 ajax 请求造成的。Ng-cloak 可能适用于静态内容，但如果模板依赖于 ajax 数据，那么它会在接收 ajax 响应之前呈现。
To avoid it I define a directive :
为了避免它，我定义了一个指令：
angu
安古
mymodule
.directive("ajaxCloak", ['$interval', '$http', function ($interval, $http) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
let stop = $interval(() => {
if ($http.pendingRequests.length === 0) {
$interval.cancel(stop);
attrs.$set("ajaxCloak", undefined);
element.removeClass("ajax-cloak");
}
}, 100);
}
};
}]);
With a bit of CSS :
用一点 CSS ：
[ajax-cloak], [data-ajax-cloak], [x-ajax-cloak], .ajax-cloak {
display: none !important;
}
Then in your main HTML file:
然后在您的主 HTML 文件中：
<div ui-view data-ajax-cloak></div>
Note: this isn't as sophisticated as ng-cloak as this is a global cloack, it hides everything until all requests are finished.
注意：这不像 ng-cloak 那样复杂，因为这是一个全局 cloack，它会隐藏所有内容，直到所有请求完成。
回答by Jens Alenius
My solution I think i tried all of above suggestions but nothing worked. Some uses ng-include but it seems a little bit to much, further it could be scary with the inner scope that gets created. So it tried it by using style and ng-style. In my affected main div.
我的解决方案我想我尝试了上述所有建议，但没有任何效果。有些人使用 ng-include 但它似乎有点多，而且它可能会被创建的内部范围吓坏。所以它通过使用样式和 ng-style 进行了尝试。在我受影响的主 div 中。
<div class="container" style="display:hidden;" ng-style="loaded">
Then I set the scope variable loaded in my base controller.
然后我设置在我的基本控制器中加载的范围变量。
$scope.loaded ={display:'block'};
Still got all those {{ }}. Weird when display sets to block only when angularjs has loaded.Then I noticed that I had the firefox f12 developer console running. Its doing stuff. Stupid me
仍然得到所有这些{{}}。当显示设置为仅在 angularjs 加载时阻止时很奇怪。然后我注意到我运行了 Firefox f12 开发者控制台。它在做事。愚蠢的我
回答by mohamedrias
From angular 1.3 onwards, you must specify a name for ng-app attribute for it to work.
从 angular 1.3 开始，您必须为 ng-app 属性指定一个名称才能使其工作。
<html lang="en" ng-app="myApp">
IN your JS:
在你的 JS 中：
angular.module("myApp",[])
This will make the angular to bootstrap.
这将使角度自举。
But for the current situation, as you are loading angular at the bottom of the page, it's taking time to load. So the css required for the ng-cloakis not available yet.
但是对于目前的情况，当您在页面底部加载 angular 时，加载需要时间。所以所需的 cssng-cloak尚不可用。
Either move the jsto the tag or load the specific CSS code to your CSS to make it work.
将 移动js到标记或将特定的 CSS 代码加载到您的 CSS 以使其工作。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
回答by Vega
I have tried all of the answers above and a lot beyond, with no help. My (large) page would flicker on each load. My solution was to add this just after body tag:
我已经尝试了上述所有答案以及更多答案，但没有任何帮助。我的（大）页面会在每次加载时闪烁。我的解决方案是在 body 标签之后添加这个：
<div style="display:flex" opacity=0>
<status-progress></status-progress>
<h3>Loading... </h3>
</div>
and to wrap everything in the page:
并将所有内容包装在页面中：
<div class="loaded" style="opacity: 0" opacity=1> ... </div>
directive:
指示：
app.directive('opacity', opacity);
function opacity($timeout) {
return {
link: function (scope, element, attrs) {
var value = attrs.opacity;
$timeout(function () {
element[0].style.opacity = value;
},500);
}
}
}
To make the page appear "smoother", the stylesheet:
为了使页面看起来“更流畅”，样式表：
.loaded{
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
}
This way, you see "Loading" for 1sec, while everything is getting ready.
这样，当一切准备就绪时，您会看到“正在加载”1 秒。
回答by jtate
Since none of these answers gave me the desired result, I accomplished what I wanted by creating a directive very similar to ng-cloakbut wrapping the code in a $timeoutso that it will wait until the end of the $digestcycle to remove the cloaking attribute and/or class. This was the only way I was able to truly hide the {{}}bindings in the browser.
由于这些答案都没有给我想要的结果，我通过创建一个非常类似于ng-cloak但将代码包装在a 中的指令来完成我想要的，$timeout以便它会等到$digest循环结束以删除隐藏属性和/或类。这是我能够真正隐藏{{}}浏览器中的绑定的唯一方法。
angular.directive('myCloak', function($timeout) {
return {
restrict: 'A',
compile: function (element, attr) {
$timeout(function () {
attr.$set('myCloak', undefined);
element.removeClass('my-cloak');
});
}
};
});
And don't forget, you will have to add a custom css rule for this new attribute / class:
不要忘记，您必须为这个新属性/类添加自定义 css 规则：
[my\:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak {
display: none !important;
}
