关于angularjs：ng-model和ng-bind之间的区别是什么

What's the difference between ng-model and ng-bind

我目前正在学习AngularJS，很难理解ng-bind和ng-model之间的区别。

有人能告诉我它们有什么不同吗？什么时候应该使用一个？

ng bind具有单向数据绑定($scope->视图)。它有一个快捷方式{{ val }}。显示插入HTML中的作用域值$scope.val，其中val是变量名。

ng模型旨在放入表单元素中，并具有双向数据绑定($scope->view and view->scope)，例如。

相关讨论

托什的回答很好地触及了问题的核心。以下是一些附加信息……

筛选器和格式化程序

ng-bind和ng-model都有在为用户输出数据之前转换数据的概念。为此，ng-bind使用过滤器，而ng-model使用格式化程序。

过滤器(NG绑定)

使用ng-bind可以使用过滤器来转换数据。例如，

；

或者更简单地说：

注意，uppercase是一个内置的角滤波器，尽管您也可以构建自己的滤波器。

格式化程序(NG模型)

要创建一个ng模型格式化程序，需要创建一个执行require: 'ngModel'的指令，该指令允许该指令访问ng model的controller。例如：

1
2
3
4
5
6
7
8
9
10

app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}

然后在你的部分：

1	<input ngModel="mystring" my-model-formatter />

这基本上是与上面的ng-bind示例中的uppercase过滤器所做的相同的ng-model。

解析器

现在，如果您计划允许用户更改mystring的值，该怎么办？从model->视图来看，ng-bind只有单向绑定。但是，ng-model可以从视图中绑定——>模型，这意味着您可以允许用户更改模型的数据，并且使用解析器可以以简化的方式格式化用户的数据。这就是它的样子：

1
2
3
4
5
6
7
8
9
10

app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}

使用ng-model格式设置工具/解析器示例的实弹

还有什么？

ng-model也有内置验证。只需修改您的$parsers或$formatters函数即可调用ngmodel的controller.$setValidity(validationErrorKey, isValid)函数。

Angular 1.3有一个新的$validator数组，您可以使用它来进行验证，而不是使用$parsers或$formatters。

Angular 1.3还支持NGModel的getter/setter

相关讨论

NGM模型ngmodel指令将输入、选择、文本区域(或自定义表单控件)绑定到作用域上的属性。

此指令在优先级级别1执行。

实例柱塞

JavaScript

1
2
3
4

angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);

CSS

1
2
3
4
5
6
7
8
9

.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}

HTML

1
2
3
4
5
6
7
8
9

<p id="inputDescription">
Update input to see transitions when valid/invalid.
Integer is a valid value.

</p>
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
aria-describedby="inputDescription" />
</form>

NGModel负责：

将视图绑定到模型中，其他指令如输入、文本区域或选择"需要"。
提供验证行为(即必需、编号、电子邮件、URL)。
保持控制状态(有效/无效、肮脏/原始，触摸/未触摸，验证错误)。
在元素上设置相关的CSS类(ng有效，ng无效，ng肮脏，ng原始，ng接触，ng未接触)包括动画。
在父窗体中注册控件。

NGBNngbind属性告诉angular用给定表达式的值替换指定HTML元素的文本内容，并在该表达式的值更改时更新文本内容。

此指令在优先级0上执行。

实例柱塞

JavaScript

1
2
3
4

angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);

HTML

1 2	<label>Enter name: <input type="text" ng-model="name"></label> Hello <span ng-bind="name"></span>!

NGBIND负责：

将指定HTML元素的文本内容替换为给定表达式的值。

相关讨论

(P)If you are hesitating between using EDOCX1 English 0 or EDOCX1 English 1，try to answer these questions：(p)布尔奇1

(P)是的，字母名称0(p)
(P)不，字母名称1(p)

布尔奇1

(P)是的，字母名称0(p)
(P)No:EDOCX1 English(You should not use ng-bind where value is required)(p)

布尔奇1

(P)是的：EDOCX1英文字母1(You cannot use ng-bind with EDOCX1)(p)
(P)不，字母名称(p)

(P)NG模型(p)(P)NG-model directive in angularjs is one of the greatest strength to bind the variables used in application with input components.这项工作是两种方式的数据连接。如果你想更好地理解这两种方法的优点，你有一个输入的组成部分和最新的价值，这一领域需要在申请的其他部分加以考虑。The better solution is to bind a variable to that field and output that variable where you wish to display the updated value through oppot the application.(p)(P)纳邦(p)(P)ng-bind works much different than ng-model.ng-bind is one way data binding used for displaying the value inside html component as inner html.This directive can not be used for binding with the variable but only with the html elements content.Infact this can be used along with ng-model to bind the component to html elements.This directive is very useful for updating the blocks like div，span，etc.with inner html content.(p)(P)这个例子将有助于你理解。(p)

1
2
3
4
5
6
7

angular.module('testApp',[]).controller('testCTRL',function($scope)

{

$scope.testingModel ="This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind ="This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";
});

1
2
3

div input{
width:600px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(P)NGModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngbind use for display a variable in html page and we can change variable just from controller and html just show variable.(p)

(P)We can use ng-bind with EDOCX1 penographic 9 clay to display，we can use shortcut for EDOCX1 penogical 10，we cannot use ng-bind with html input controls，but we can use shortcut for EDOCX1 original 10 with html input controls.(p)字母名称