ng-bind与ng-斗篷在angularjs中的区别。

In this question why ng-bind is better than {{}} in angular? I understood the differences between {{}} and ng-bind. On the other hand I can use ng-cloak instead of ng-bind.

在这个问题中，为什么ng-bind在角度上优于{}?我理解{{}}和ng-bind之间的差异。另一方面，我可以用ng-斗篷代替ng-bind。

Now my question is what is the differences between ng-bind and ng-cloak?

现在我的问题是，ng-bind和ng-斗篷有什么不同?

5 个解决方案

#1

They do the same job relatively.

他们做同样的工作。

Looking at api docs, you may find what are they exactly.

看看api文档，你会发现它们到底是什么。

ngCloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

ng斗篷指令用于防止浏览器在加载应用程序时以原始(未编译)形式简要显示角html模板。使用此指令可避免html模板显示引起的不希望的闪烁效果。

The ng-cloak directive is a built-in angular directive that hides all of the elements on the page that contain the directive.

ng-隐身指令是一个内置的角指令，它隐藏页面上包含该指令的所有元素。

<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>

After the browser is done loading and the compile phase of the template is rendering, angular will delete the ngCloak element attribute and the element will become visible.

加载完浏览器并呈现模板的编译阶段后，角将删除ng斗篷元素属性，元素将变得可见。

ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

ngBind属性告诉angle将指定的HTML元素的文本内容替换为给定表达式的值，并在表达式的值改变时更新文本内容。

Using ng-bind instead of {{ }} will prevent the unrendered {{ }} from showing up instead of empty elements being rendered. The example from above can be rewritten to the following which will prevent the page from flickering with {{ }}:

使用ng-bind而不是{}将防止未呈现的{}出现，而不是呈现空元素。可以将上面的示例重写为以下示例，以防止页面闪烁{}:

<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>

#2

You can look up things like that in the Angular Api Docs.

您可以在角Api文档中查找类似的内容。

ng-cloak is just a css rule that sets the style to display: none !important so your {{}} expression is not visible until replaced with actual data. https://docs.angularjs.org/api/ng/directive/ngCloak

ng-隐形只是一个css规则，它将样式设置为显示:none !https://docs.angularjs.org/api/ng/directive/ngCloak

While ng-bind is an expression itself.

而ng-bind本身就是一个表达式。

#3

When you use ng-bind, browser do ignore this while after angular is loaded , it binds the value in the view.

当您使用ng-bind时，浏览器确实会在加载了棱角之后忽略它，它会绑定视图中的值。

While if you use ng-cloak, {{}} will still appear for a short time, but as soon as angular is loaded and parsed, it will omit the {{}} till the compilation occurs.

如果使用ng-斗篷，{{}仍然会出现很短的时间，但是当角被加载和解析时，它会在编译发生之前省略{{}}。

#4

From documentation

从文档

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

ng斗篷指令用于防止浏览器在加载应用程序时以原始(未编译)形式简要显示角html模板。使用此指令可避免html模板显示引起的不希望的闪烁效果。

https://docs.angularjs.org/api/ng/directive/ngCloak

https://docs.angularjs.org/api/ng/directive/ngCloak

#5

In a practical sense, if you pass your model into a view from the server, then ng-cloak is fine -- when the page renders, your view data is populated. However, if you're using a more mobile-friendly approach of loading your html and loading your data and perhaps localization with an additional call, then ng-model prevents {{}} flicker between when your page loads and your data arrives. However, I find ng-model insufficient as it can't be used universally, so I generally put an ng-show on a container that exposes the view after the data has been retrieved and a flag has been set.

在实际意义上，如果您将模型从服务器传递到视图中，那么ng- hide就可以了——当页面呈现时，将填充视图数据。但是，如果您使用一种更方便移动的方法来加载html并加载数据，或者使用额外的调用来进行本地化，那么ng模型就会在页面加载和数据到达之间阻止{{}闪烁。但是，我发现ng-model不够充分，因为它不能被普遍使用，所以我通常在获取数据并设置标志后将一个ng-show放到一个容器中，该容器将视图公开。