Question

我正在编写自己的自定义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: '='}的设置对象。

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

所以我的问题是：

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

Answer 1

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

如果您认为它会保持不变，就像您已经显示的示例一样，那么只需解析一次该值就足够了。在这种情况下使用的适当服务是$parse：

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

    // …
}

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

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

    // …
}

Answer 2

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

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

使用AngularJs的自定义验证器

2 个答案: