Question

我在表达式{{}}，ng-bind和ng-model之间非常混淆。如果可能，请举例说明。

Answer 1

{{ 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在范围内将具有输入值。

希望有所帮助！

Answer 2

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

虽然ng-bind可以帮助您将值绑定到元素的innerHTML，但ng-model可以帮助您将数据绑定到交互元素（即<input>，{{1 }}，<checkbox>），你知道了......

<强>用法：

<强>纳克绑定

如果你有你的控制器中有<textarea>。

$scope.textFromComponent = "Superman"在此span元素中绑定此值。

{{}}

使用<span ng-bind="textFromComponent"></span>可以实现相同的行为。

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

ng-bind

<强> NG-模型

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

将此值绑定到input元素的<input ng-model="textFromComponent" />属性。这会绑定值双向，这意味着如果您对代码中的value进行了任何更改，它将自动反映在屏幕上。同时，如果用户对其进行任何更改（因为它们是交互式元素，用户可以更改它们），更改后的值将传递给您的代码。

Answer 3

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

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

ng-model用于输入。

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

＆＃13;

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

＆＃13;

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

3 个答案: