谁能解释表达式、ng-bind 和 ng-model 之间的区别？

Question

我对表达式 {{}}、ng-bind 和 ng-model 很困惑。请尽可能举例说明。

Answer 1

{{ data }} 将被相关范围内的 data 变量的值替换。当 data inside scope 发生变化时，它会自动更新。所以，我们说，
{{ data }} 绑定到变量 data。但是，如果 data 是 html，angularjs 出于安全原因将自动转义标记。
ng-bind绑定元素的'content'。就像，在 <div ng-bind="data" ></div> 的情况下， div 将填充 data 变量的值。在这种情况下，data 中的标记也将被呈现。（使用 ng-bind-html）
ng-model 只是将 html 元素的值绑定到作用域中的某个变量。比如：如果 <input ng-model="data" /> 范围内的变量 data 将具有输入值。

希望对您有所帮助！

Answer 2

ng-bind 和 ng-model 都是 Angular 中的内置指令。

虽然 ng-bind 帮助您将值绑定到元素的 innerHTML，但 ng-model 帮助您将数据绑定到交互元素（即 <input>、<checkbox>, <textarea>), 你明白了..

用法：

ng-绑定

如果你有 $scope.textFromComponent = "Superman" 在你的控制器中。

<span ng-bind="textFromComponent"></span> 在此跨度元素内绑定此值。

{{ }}

可以使用 {{}} 实现相同的行为。

这些花括号集称为插值指令，它们用作 ng-bind 的简写形式。在使用它们时，您不再需要编写 ng-bind 而是直接绑定它们。喜欢：

<span>{{textFromComponent}}</span>

ng-模型

<input ng-model="textFromComponent" />

将此值绑定到输入元素的 value 属性。这将绑定值 two-way，这意味着如果您对代码中的 $scope.textFromComponent 进行任何更改，它将自动反映在屏幕上。同时，如果用户对其进行任何更改（因为它们是交互式元素，用户可以更改它们）更改后的值将传递给您的代码。

Answer 3

ng-bind和{{}}基本相同。但是，在您的应用程序完全加载之前，有时 {{}} 是可见的。 ng-bind 通常在所有内容加载完成之前看起来会更好一些。 {{}} 更简单，但有一些需要 ng-bind 的限制。 <span ng-bind="something"></span> 是你的朋友。

有些情况下 {{}} 不起作用。例如，当您的数据是标记时。

ng-model 用于输入。

以下示例中使用了所有三个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <p>Please Enter Your Name</p><input type="text" ng-model="yourName" />
  <p>Hello <span ng-bind="yourName"></span>, this is an ng-bind!</p>
  <p>Hello {{yourName}}, this is bind in brackets</p>
</div>

谁能解释表达式、ng-bind 和 ng-model 之间的区别？

Can anyone explain the difference between expression, ng-bind and ng-model?

angularjs

ng-bind