例如,这里是一个例子,在角度1.2.23中 – 尝试输入一个超出范围的数字:
http://jsfiddle.net/8doq0saf/5/
在1.3-rc下运行的同样的事情给出了不同的结果:
http://jsfiddle.net/1t52s9b2/4/
我还没有找到关于这个变化的任何文件.解析密钥的目的是什么?如何更改代码以恢复旧的行为?
angular.module('app',[]).directive('number',function () { return { require: 'ngModel',link: function (scope,elem,attrs,ctrl) { // valid number ctrl.$parsers.push(function (value) { var valid = angular.isUndefined(value) || value === '' || isFinite(value); ctrl.$setValidity('number',valid); return valid ? angular.isUndefined(value) || value === '' ? undefined : Number(value) : undefined; }); ctrl.$parsers.push(function (value) { if (!angular.isDefined(attrs.minNumber)) { return value; } var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber); ctrl.$setValidity('minNumber',valid); return valid ? value : undefined; }); ctrl.$parsers.push(function (value) { if (!angular.isDefined(attrs.maxnumber)) { return value; } var valid = angular.isUndefined(value) || Number(value) <= Number(attrs.maxnumber); ctrl.$setValidity('maxnumber',valid); return valid ? value : undefined; }); } }; });
解析
Angular现在自动为所有$错误集合添加一个“parse”键,其值设置相应 – 如果任何解析器返回undefined,则返回true,否则返回false.
对于不可读的值(为数字输入的alphas,格式不正确的日期等),我们应该从解析器返回未定义的值.这将导致Angular删除已设置的任何$错误键,并使用{“parse”:true}替换整个对象.没有更多的解析器将被运行.该模型不会被更新. $parsers数组现在应该只能用于解析.
验证
ngModelController有一个新的$validators属性,我们可以为其分配验证功能.这些只有在分析管道成功的情况下才会运行.从这些函数之一返回false作为可解析为所需数据类型的值,但仅为无效(字符串太长,数字超出范围等).验证器函数的名称成为$error对象中的验证键.所有验证器都将运行,即使返回false.只有在验证成功的情况下,模型才会被更新.
这可能是现有应用程序的突破性变化,因为人们经常从解析器返回无效值.这是我所拥有的,这是一个典型的例子:
ctrl.$parsers.push(function (value) { if (!angular.isDefined(attrs.minNumber)) { return value; } var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber); ctrl.$setValidity('minNumber',valid); return valid ? value : undefined; });
根据这个新的方案,这应该被转移到验证函数:
ctrl.$validators.minNumber = function (value) { return !value || !angular.isDefined(attrs.minNumber) || (value >= Number(attrs.minNumber)); });
这是一切修复的指令:
angular.module('app',ctrl) { // valid number ctrl.$parsers.push(function (value) { if(value === '') return value; return isFinite(value) ? Number(value) : undefined; }); ctrl.$validators.minNumber = function (value) { return !value || !angular.isDefined(attrs.minNumber) || (value >= Number(attrs.minNumber)); }; ctrl.$validators.maxnumber = function (value) { return !value || !angular.isDefined(attrs.maxnumber) || (value <= Number(attrs.maxnumber)); }; } }; });
http://jsfiddle.net/snkesLv4/10/
我真的很喜欢这种新的方式 – 它更清洁.
原文地址:https://www.jb51.cc/angularjs/140511.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。