AngularJS 中 value=" {{ var }} " 和 [value]="var" 的区别答案

【问题标题】：Differences between value=" {{ var }} " and [value]="var" in AngularJSAngularJS 中 value=" {{ var }} " 和 [value]="var" 的区别
【发布时间】：2017-06-16 00:37:02
【问题描述】：

谁能给我解释一下有什么区别

value="{{var}}" vs [value]="var"

谢谢。

【问题讨论】：

第一个看起来类似于 angular 中的字符串模板，其中 var 将是在大括号之间替换的值，第二个看起来很奇怪，最多我可以将其视为对象的命名属性然而，在声明期间，更多的上下文可以创造奇迹；）
angular.io/guide/template-syntax#a-new-mental-model
当我使用第一个时，我的代码出现了一些问题。 ngSelected 无法正常工作。所以我想看看两者如何在后端工作的解释。还是谢谢
@cartant 谢谢，这非常适合上下文 ::)

标签： javascript angularjs angular2-directives

【解决方案1】：

根据https://angular.io/guide/template-syntax#a-new-mental-model

2 种括号类型代表 2 个不同的数据流方向。

[target]="expression" 被大声说为 'bind target' 和 (target)="statement" 为'on target'

绑定目标，将您的 JavaScript 模型绑定到您的视图。

在目标上，在视图更改时向您的 JavaScript 模型引发事件。

您可以将它们组合起来创建绑定目标，两者兼而有之。

https://angular.io/guide/template-syntax#property-binding-or-interpolation

value="{{var}}" 是一个插值绑定。它可以以与 [attr.value]="var"

相同的方式使用

有这些细微差别。

value="{{var}}" 或在 html 节点的内容中使用 {{}}，仅适用于字符串。

{{ }} 存在于 Angular 中的事实意味着他们需要做更多的工作处理模板，但由于这项工作已经沉没，您可以随意使用 {{ }} 更有意义并提高可读性，而无需性能受到很大影响。

如果您需要绑定到非字符串属性，则需要改用属性绑定语法。

我建议坚持使用属性绑定语法 [value] = "var"，因为它可以让您使用 2 种不同的定向绑定，而不会产生太多的心理开销。

【讨论】：

对大量编辑感到抱歉。我的角度有点生锈，所以我边走边验证信息。