分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – Angular 1.3中新建的“解析”验证密钥的目的是什么？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

ngModelController解析管道的行为似乎在角1.2和1.3之间发生了变化.我现在总是看到一个名为“parse”的新的验证键被添加到所有的$error对象中,并且每当一个解析器返回未定义时,它将覆盖/替换可能已经设置的所有其他验证键.

例如,这里是一个例子,在角度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;
            });
        }
    };
});

角度1.3合理化的东西,使解析和验证之间有一个清晰的区别.

解析

Angular现在自动为所有$错误集合添加一个“parse”键,其值设置相应 – 如果任何解析器返回undefined,则返回true,否则返回false.

对于不可读的值(为数字输入的alphas,格式不正确的日期等),我们应该从解析器返回未定义的值.这将导致Angular删除已设置的任何$错误键,并使用{“parse”：truE}替换整个对象.没有更多的解析器将被运行.该模型不会被更新. $parsers数组现在应该只能用于解析.

验证

ngModelController有一个新的$validators属性,我们可以为其分配验证功能.这些只有在分析管道成功的情况下才会运行.从这些函数之一返回false作为可解析为所需数据类型的值,但仅为无效(字符串太长,数字超出范围等).验证器函数的@L_673_22@成为$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));
            };
        }
    };
});