任何人都可以解释表达式，ng-bind和ng-model之间的区别吗？

-2

表达式{{}}，ng-bind和ng-model之间的混淆。如果可能的话请用例子来解释。任何人都可以解释表达式，ng-bind和ng-model之间的区别吗？

来源

2017-06-06 Samir Rawat

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

虽然ng-bind帮助您将值绑定到一个元素的innerHTML，ng-model帮助您将数据绑定到互动元素（即<input>，<checkbox>，<textarea>），你说对了..

用法：

纳克绑定

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

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

{{}}

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

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

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

NG-模式

<input ng-model="textFromComponent" />

结合这个价值，你的输入元素的value财产。这绑定值双向这意味着如果您在代码中对$scope.textFromComponent进行了任何更改，它将自动反映在屏幕上。同时，如果用户对其进行了任何更改（因为它们是交互式元素，用户可以更改它们），所更改的值将传递给您的代码。

来源

2017-06-06 17:27:02

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

希望帮助！

来源

2017-06-06 17:20:33 Mrigank

1更问题是，表达式{{}}是一种方法的结合或双向？ –

{{}}是一个单向绑定范围 - - >查看 – Mrigank

如果您使用{{}}表达式表示您使用双向绑定和{{::}}，则{{}}是角度中的绑定值的表达式是一个角度绑定表达式..请参阅此https://stackoverflow.com/questions/33480548/what-is-the-difference-between-ng-bind-vs-one-time-binding-in-angular –

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>

来源

2017-06-06 17:39:54 GreenFox

任何人都可以解释表达式，ng-bind和ng-model之间的区别吗？

回答

相关问题