实施例

Question

之间有什么区别吗？ {{}}和ng-bind in angular。

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

Answer 1

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

通常情况下，您不能直接使用ngBind，而是使用   双重卷曲标记，如{{expression}}，类似但更少   冗长。

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

Answer 2

使用{{ ... }}时，它们之间最明显的区别是Flash of Unstyled内容。

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

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

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

Answer 3

页面加载时，

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

Answer 4

除上述答案外，

插值的性能问题：

正如this主题中所解释的那样，

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

另一方面，即使没有必要，也会在每个$摘要中对托架进行脏检查和刷新。

Answer 5

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

以下是一个例子：

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

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

Answer 6

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

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

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

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

Answer 7

另一个区别是ng-bind和interpolation显示数据的方式。 ng-bind调用toString()方法，而interpolation使用自定义＆＃34; stringify＆＃34;功能

实施例

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

输出

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]

Answer 8

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

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

Answer 9

插值仅用于只读目的，您不能在TypeScript文件中已声明的变量的小括号内分配一个值。

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

Answer 10

这不是一个答案，但是ng-bind可通过ng-bind-html轻松交换，它将实际的html文本放入元素内，而不是纯文本。

由于我想知道（好，只是）几分钟，所以我也在这里添加了它。我的问题是，文本DOM资源管理器显示相同的输出。

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

10 个答案:

实施例

输出