猿问

ng-model和ng-bind有什么区别

目前,我正在学习AngularJS和我难以理解的区别ng-bindng-model

谁能告诉我它们的区别以及何时应使用另一种?


摇曳的蔷薇
浏览 886回答 3
3回答

慕丝7291255

tosh的答案很好地成为了问题的核心。这是一些其他信息。筛选器和格式化程序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'do指令,该指令允许该指令访问ngModel的controller。例如:app.directive('myModelFormatter', function() {&nbsp; return {&nbsp; &nbsp; require: 'ngModel',&nbsp; &nbsp; link: function(scope, element, attrs, controller) {&nbsp; &nbsp; &nbsp;controller.$formatters.push(function(value) {&nbsp; &nbsp; &nbsp; &nbsp; return value.toUpperCase();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }}然后在您的部分:<input ngModel="mystring" my-model-formatter />这本质上是ng-model什么样的等效uppercase 过滤器在做ng-bind上面的例子。解析器现在,如果您打算允许用户更改值,该mystring怎么办?ng-bind从模型 -> 视图只有一种方式绑定。但是,ng-model可以从视图 -> 模型进行绑定,这意味着您可以允许用户更改模型的数据,并且使用解析器可以以简化的方式格式化用户的数据。看起来像这样:app.directive('myModelFormatter', function() {&nbsp; return {&nbsp; &nbsp; require: 'ngModel',&nbsp; &nbsp; link: function(scope, element, attrs, controller) {&nbsp; &nbsp; &nbsp;controller.$parsers.push(function(value) {&nbsp; &nbsp; &nbsp; &nbsp; return value.toLowerCase();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }}播放ng-model格式化程序/解析器示例的实时调试器还有什么?ng-model还具有内置验证。只需修改您的$parsers或$formatters函数即可调用ngModel的controller.$setValidity(validationErrorKey, isValid)函数。Angular 1.3有一个新的$ validators数组,您可以使用它代替$parsersor进行验证$formatters。Angular 1.3还具有对ngModel的getter / setter支持
随时随地看视频慕课网APP

相关分类

AngularJS
我要回答