我目前正在学习AngularJS,很难理解ng-bind和ng-model之间的区别。
谁能告诉我它们有什么不同,什么时候应该用一个而不是另一个?
我目前正在学习AngularJS,很难理解ng-bind和ng-model之间的区别。
谁能告诉我它们有什么不同,什么时候应该用一个而不是另一个?
当前回答
ngModel通常使用输入标签来绑定一个变量,我们可以在控制器和html页面中更改变量,但ngBind用于在html页面中显示变量,我们可以只从控制器和html显示变量来更改变量。
其他回答
我们可以使用ng-bind与<p>显示,我们可以使用ng-bind {{model}}的快捷方式,我们不能使用ng-bind与html输入控件,但我们可以使用ng-bind {{model}}与html输入控件的快捷方式。
<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
Hello {{name}}
<p ng-bind="name"</p>
如果您在使用ng-bind还是ng-model之间犹豫不决,请尝试回答以下问题:
只需要显示数据吗?
是:ng-bind(单向绑定) No: ng-model(双向绑定)
您需要绑定文本内容(而不是值)吗?
是的:ng-bind No: ng-model(你不应该在需要value的地方使用ng-bind)
你的标签是HTML <input>?
是:ng-model(你不能使用ng-bind <input>标签) 没有:ng-bind
Ng-bind有单向数据绑定($scope——>视图)。它有一个快捷键{{val}} 它显示范围值$scope。Val插入到HTML中,Val是一个变量名。
Ng-model旨在放在表单元素内部,并具有双向数据绑定($scope—>视图和view—> $scope),例如<input Ng-model ="val"/>。
托什的回答很好地触及了问题的核心。这里有一些额外的信息....
过滤器和格式化器
Ng-bind和ng-model都具有在为用户输出数据之前转换数据的概念。为此,ng-bind使用过滤器,而ng-model使用格式化器。
过滤器(ng-bind)
使用ng-bind,您可以使用过滤器来转换数据。例如,
<div ng-bind=“mystring | uppercase”></div>,
或者更简单地说:
< div > {{mystring | uppercase}} < / div >
注意,uppercase是一个内置的角过滤器,尽管你也可以构建自己的过滤器。
格式化程序(ng-model)
要创建一个ng-model格式化器,你需要创建一个指令:'ngModel',它允许该指令访问ngModel的控制器。例如:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}
然后在你的部分:
<input ngModel="mystring" my-model-formatter />
这本质上相当于ng模型中大写过滤器在上面ng-bind示例中的作用。
解析 器
现在,如果您计划允许用户更改mystring的值呢?Ng-bind只有一种绑定方式,从model- >视图来看。然而,ng-model可以从view- >模型绑定,这意味着您可以允许用户更改模型的数据,并且使用解析器可以以精简的方式格式化用户的数据。这是它的样子:
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的控制器。$setValidity(validationErrorKey, isValid)函数。
Angular 1.3有一个新的$validators数组,你可以用它来代替$parsers或$formatters进行验证。
Angular 1.3也支持ngModel的getter/setter
ngModel通常使用输入标签来绑定一个变量,我们可以在控制器和html页面中更改变量,但ngBind用于在html页面中显示变量,我们可以只从控制器和html显示变量来更改变量。