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

Question

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

Answer 1

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

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

用法：

ng-绑定

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

<span ng-bind="textFromComponent"></span> 将此值绑定到此 span 元素中。

{{ }}

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

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

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

ng-model

<input ng-model="textFromComponent" />

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

Answer 2

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>

Answer 3

• {{ data }} 将被相关范围内的data 变量的值替换。它会随着data 内部scope 的变化而自动更新。所以，我们说，
  {{ data }} 绑定到变量data。但是，如果data 是html，出于安全原因，angularjs 会自动转义标记。

• ng-bind 绑定元素的“内容”。比如，在<div ng-bind="data" ></div> 的情况下，div 将填充data 变量的值。在这种情况下，data 中的标记也将被渲染。（使用ng-bind-html）

• ng-model 只是将 html 元素的值绑定到范围内的某个变量。比如：如果<input ng-model="data" /> 变量data 在范围内将有输入的值。

希望有帮助！