带有 AngularJs 的自定义验证器_JavaScript

我正在编写自己的自定义 AngularJs 验证器，如下所示：

.directive('float', function ($log) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {float: '='},
        link: function ($scope, ele, attrs, ctrl) {
            var settings = $scope.float || {};

            ctrl.$validators.float = function(value) {
                var valid = isTheInputValidFunction( settings );
                ctrl.$setValidity('float', valid);
                return valid;
            };
        }
    };
});

我像这样使用验证器：

<input type="text"ng-model="someVar" name="preis" float="{precision: 5, scale: 2}">

但是，一旦我附加了多个验证器，就会收到以下错误：

多个指令 [...] 要求新的/隔离的范围

这是因为我所有的验证器都获得了一个必须传递到作用域scope: {float: '='}的设置对象scope: {float: '='} 。

我知道我可以使用var settings = JSON.parse(attrs.float); 在指令中，但看起来不对。

所以我的问题是：

您如何在 AngularJs 中正确实现自定义验证器？

这实际上取决于您是否希望更改设置。

如果您认为它将是恒定的，就像在您展示的示例中一样，那么只需解析一次该值就足够了。 在这种情况下使用的适当服务是：

link: function ($scope, ele, attrs, ctrl) {
    var settings = $parse(attrs.float)($scope);

    // …
}

如果您认为它可能与变量一起使用，则应其内容：

link: function ($scope, ele, attrs, ctrl) {
    var settings = undefined;
    $scope.$watch(attrs.float, function (newSettings) {
        settings = newSettings;
    });

    // …
}

也许是因为您正在调用 $setValidity。 我相信 $validators 管道的全部意义就是为你做这件事。 只需返回一个布尔值。

ctrl.$validators.float = function(value) {
  return isTheInputValidFunction( settings );
};

带有 AngularJs 的自定义验证器

问题描述

1楼

2楼