ng之间的区别是什么?
我目前正在学习AngularJS,并且很难理解ng-bind
和ng-model
之间的区别。
谁能告诉我他们有什么不同,什么时候应该使用另一个?
ng-bind具有单向数据绑定($ scope - > view)。 它有一个快捷键{{ val }}
,它显示插入到html中的范围值$scope.val
,其中val
是一个变量名。
ng-model旨在放置在表单元素中,并具有双向数据绑定($ scope - > view和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格式化程序,可以创建一个指令,该指令require: 'ngModel'
,它允许该指令访问ngModel的controller
。 例如:
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-model
在上面的ng-bind
示例中等同于大uppercase
滤器所做的事情。
解析器
现在,如果您打算允许用户更改mystring
的值,该怎么办? ng-bind
只有一种方式绑定,从model - > view 。 但是, ng-model
可以从视图 - > 模型绑定,这意味着您可以允许用户更改模型的数据,并且可以使用解析器以流线形式格式化用户的数据。 以下是这个样子:
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)
setValidity controller.$setValidity(validationErrorKey, isValid)
函数。
Angular 1.3有一个新的$ validators数组 ,您可以用它来验证,而不是$parsers
或$formatters
。
Angular 1.3对ngModel也有getter / setter支持
ngModel
ngModel指令将输入,select,textarea(或自定义窗体控件)绑定到作用域上的属性。该指令在优先级1上执行。
示例Plunker
JAVASCRIPT
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);
CSS
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}
HTML
<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负责:
ngBind
ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值,并在该表达式的值更改时更新文本内容。该指令在优先级0上执行。
示例Plunker
JAVASCRIPT
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
HTML
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
ngBind负责: