Angular中ng-bind和插值表达式{{}}的区别

Question

{{ }}和ng-bind在Angular中有什么区别？

我对Angular非常新手。我开始使用{{ }},然后在文档中发现了ng-bind。我认为它们做的工作是一样的，但为什么需要额外的指令，如果没有的话，请告诉我它们之间的区别。

- Nitin Rawat

---

投票重新开放，因为这是一个清晰的问题，然而这个问题可以从为什么在Angular中ng-bind比{{}}更好？得到答案。 - Grijesh Chauhan

我认为Grijesh是正确的 - 这看起来像是同一个问题（而且这个问题是一个副本）：AngularJS：为什么ng-bind比{{}}在angular中更好？ - ruffin

Answer 1

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

通常情况下，你不会直接使用 ngBind，而是使用双花括号的标记{{ expression }}，这种方式类似但更简洁。

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

- Madhur Ahuja

Answer 2

它们之间最明显的区别是使用{{...}}会闪现未样式化的内容。

然而，如果您传递给{{obj}}和ng-bind="obj"的对象不是字符串，则两者之间有更微妙的差异。

来自https://dev59.com/93jZa4cB1Zd3GeqPg6-c#19744728：

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

- musically_ut

Answer 3

除了上述提到的答案之外，

插值表达式的性能问题：

正如在此线程中更好地解释的那样， ng-bind是一个指令，将在传递的变量上放置一个监视器。因此，只有在传递的值实际更改时，ng-bind才会应用。

另一方面，括号将被脏检查并在每个$digest中刷新，即使不必要也是如此。

- hemanth savvana

Answer 4

{{ }}可以在页面加载时闪烁，而ng-bind会将表达式隐藏得很好，直到它正确地显示出来。

- Lajos Veres

Answer 5

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

以下是一个示例：

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

关键区别在于ng-bind属性不会在页面加载时显示HTML内容，而插值指令在页面加载时会显示没有样式的内容闪烁。

- Pavan

Answer 6

另一个区别在于ng-bind和插值表达式显示数据的方式。 ng-bind调用toString()方法，而插值表达式使用自定义的“stringify”函数。

示例

<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]

- Rash

Answer 7

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

这是因为模板在AngularJS有机会编译元素之前加载。为了解决这个问题，您可以使用ng-cloak指令。

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

注意：如果页面中有数千个绑定，{{}}有时会导致性能问题。在这些情况下，我们应该选择ng-bind。

- Kumar Rahul

Answer 8

插值(Interpolation)只用于只读目的，您不能将Mustache括号内的值分配给在Typescript文件中声明的变量。

它们之间的基本区别是ng-bind应始终在元素<>内使用，但可以在元素内部、外部和之间使用插值指令。

- Yasir Shabbir Choudhary

Answer 9

这不是一个答案，但是ng-bind可以很容易地被ng-bind-html替换，它将实际的HTML文本放置在元素内而不是纯文本。

因为我也曾疑惑了一会儿，所以我把这个放在这里。我的问题是，文本DOM Explorer显示相同的输出。

- Matt