Angular中ng-bind和interpolation {{}}之间的区别

Is there any difference between {{ }} and ng-bind in angular.

{{}}和角度中的ng-bind之间是否有任何区别。

I am quite new to Angular. I started with using {{ }} and then in the documentation i find ng-bind. I think they do the same work but then why an extra directive, if not then please tell the difference.

我对Angular很新。我开始使用{{}}，然后在文档中找到ng-bind。我认为他们做了同样的工作，但为什么还有一个额外的指令，如果不是，那么请说出不同之处。

8 个解决方案

#1

There is some hint in the official docs: https://docs.angularjs.org/api/ng/directive/ngBind

官方文档中有一些提示：https：//docs.angularjs.org/api/ng/directive/ngBind

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

通常，您不直接使用ngBind，而是使用类似{{expression}}的双卷曲标记，它类似但不那么冗长。

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.

如果在Angular编译它之前浏览器在其原始状态下暂时显示模板，则最好使用ngBind而不是{{expression}}。由于ngBind是一个元素属性，因此在加载页面时，它会使绑定对用户不可见。

#2

The most obvious difference between them is Flash of Unstyled content while using {{ ... }}.

它们之间最明显的区别是使用{{...}}时Flash的无格式内容。

However, there is a more subtle difference between the two if the object you pass to {{ obj }} and ng-bind="obj" is not a string.

但是，如果传递给{{obj}}和ng-bind =“obj”的对象不是字符串，则两者之间会有更微妙的区别。

From https://*.com/a/19744728/987185 :

来自https://*.com/a/19744728/987185：

Depending on whether you use {{ ... }} or ng-bind syntax, the .toJSON and the .toString function on your object will be called to determine its representation.

根据您使用{{...}}还是ng-bind语法，将调用对象上的.toJSON和.toString函数来确定其表示形式。

#3

{{ }} can flash when the page is loading, ng-bind hides the expression properly until it is displayed correctly.

页面加载时{{}}会闪烁，ng-bind会正确隐藏表达式，直到正确显示。

#4

In addition to the above mentioned answers,

除了上面提到的答案，

Performance Issues with Interpolation:

插值的性能问题：

As explained in this thread better,

正如在这个帖子中解释的更好，

ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply when the passed value does actually change.

ng-bind是一个指令，它将在传递的变量上放置一个观察者。因此ng-bind仅在传递的值实际发生变化时才适用。

The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.

另一方面，括号中的括号将在每个$摘要中进行脏检查和刷新，即使没有必要。

#5

In AngularJs ng-bind directive works as alternative to the interpolation directive {{ }}. By inserting an ng-bind attribute to HTML element we can insert AngularJS data into it.

在AngularJs中，ng-bind指令可以替代插值指令{{}}。通过将ng-bind属性插入HTML元素，我们可以将AngularJS数据插入其中。

Here is an example:

这是一个例子：

 <div ng-controller="DemoController" >
  <span ng-bind="demoData.doThis()"></span>
</div>

The Key Difference is ng-bind attribute wont show Html content on page loading, where as interpolation Directive show as flash of content without style while page loading.

关键区别是ng-bind属性不会在页面加载时显示Html内容，其中插值指令在页面加载时显示为没有样式的内容闪存。

#6

Sometimes when we load our application in the browser , we can notice flashing content for some milliseconds before {{ name }} is resolved and data is loaded.

有时，当我们在浏览器中加载应用程序时，我们会在解析{{name}}并加载数据之前的几毫秒内注意到闪烁内容。

This happens because the template is loaded before AngularJS had a chance to go in and compile the elements. To resolve this issue, you can use ng-cloak directive.

发生这种情况是因为在AngularJS有机会进入并编译元素之前加载了模板。要解决此问题，您可以使用ng-cloak指令。

In the first approach(i.e. {{}}), AngularJS evaluates the expression then replaces it with some value which sometime be left with the flashing double curly brackets but ng-bind saves this time by informing AngularJS to put the contents of the expression within the element itself.

在第一种方法（即{{}}）中，AngularJS会对表达式求值，然后将某些值替换为闪烁的双花括号，但ng-bind会通过通知AngularJS将表达式的内容放入其中来节省时间。元素本身。

Note: {{}} sometimes cause performance issue if we have thousand of bindings in our page.In these scenario's, we should go with ng-bind.

注意：如果我们的页面中有数千个绑定，{{}}有时会导致性能问题。在这些场景中，我们应该使用ng-bind。

#7

The major difference between ng-bind and {{}} is that ng-bind creates a watcher for variable passed to it, while curly brackets({{}}) will (store the entire expression in memory i.e. }perform dirty-checking and refreshing the expression in every digest cycle even if it is not required.

ng-bind和{{}}之间的主要区别在于ng-bind为传递给它的变量创建了一个观察者，而大括号（{{}}）将（将整个表达式存储在内存中，即执行脏检查和即使不需要，也可以在每个摘要周期中刷新表达式。

ng-bind will only apply when the value passed is changing actually.

ng-bind仅在传递的值实际发生变化时才适用。

#8

Another difference is the way ng-bind and interpolation display the data. ng-bind calls the toString() method, whereas interpolation uses a custom "stringify" function.

另一个区别是ng-bind和interpolation显示数据的方式。 ng-bind调用toString（）方法，而插值使用自定义“stringify”函数。

Example

<div ng-controller="showClockCtrl">
    <p>The current time is {{currentDateTime}}.</p>
    <p>The current time is <span ng-bind="currentDateTime"></span>.</p>
</div>

<div ng-controller="showClockCtrl">
    <p>MyObject is {{myObject}}</p>
    <p>MyObject is <span ng-bind="myObject"></span></p>
</div>

<script>
var showClockCtrl = function ($scope) {
    $scope.currentDateTime = new Date();
    $scope.myObject = {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3'
    }
};
</script>

Output

The current time is "2017-11-18T15:09:59.429Z".

The current time is Sat Nov 18 2017 10:09:59 GMT-0500 (EST).

MyObject is {"key1":"value1","key2":"value2","key3":"value3"}

MyObject is [object Object]