Question

我想用参数实现验证属性。特别是用于以自定义格式验证最大日期的属性。

<input type="datetime" ng-model="someForm.someField" name="SomeField" max-date="2016.09.11" />

有许多验证没有参数的指令的例子，所以我试图将我的代码基于它们。我添加了范围和限制，仅用于指定指令的使用。

fooApp.directive('maxDate', function () {
    return {
        restrict: 'A',
        scope: {
            max: '='
        },
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModel) {
            ngModel.$validators.maxDate = function (value, max) {
                //Here will be validator logic
            };
        }
    }
});

问题是 - max始终与value相同。它不是max-date属性的值，而是输入字段的值。我做错了什么？

Answer 1

我试着解决这个问题。请参阅下文。

<强>模板

<input type="datetime" ng-model="someForm" name="SomeField" max-date=20160911 />

2016.09.11是NaN，2016/09/11是分数。不确定为什么他们都不被视为字符串。所以，我删除了分隔符并使用子字符串来创建日期。见下文。

<强> JS

return {
    restrict: 'A',
    scope: {
        maxDate: '='
    },
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
        ngModelCtrl.$validators.maxDateValidator = function (modelValue, viewValue) {
            var year = scope.maxDate.toString().substring(0,4);
            var month = parseInt(scope.maxDate.toString().substring(4,6))-1;
            var day = scope.maxDate.toString().substring(6);
            var maximumDate = new Date(year, month, day)
            var enteredDate = new Date(viewValue);
            console.log(maximumDate.getTime()>=enteredDate.getTime());
            return maximumDate.getTime()>=enteredDate.getTime();
        };
    }
}

就你的问题而言，参数实际上并不是你想的。它们是模型的视图值和模型值。请参阅文档here。

Answer 2

:imap ff <C-v>

你能检查一下吗？

Answer 3

看起来你在你的范围内键入了错误的绑定。它寻找一个名为＆＃34; max＆＃34;的绑定。您可以将max作为要评估的属性添加并使用attrs。获取值，或者您可以使用以下内容绑定自身：

scope: {
  maxDate : '='
}

据我所知，你的例子应该可行。您也可以使用隔离范围进行绑定;例如日期：＆＃39; = maxDate＆＃39;

Answer 4

这有点棘手，但有效：

fooApp.directive('maxDate', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elm, attr, ctrl) {
            if (!ctrl) return;
            var maximumDate = 0;
            attr.$observe('maxDate', function (value) {
                maximumDate = value;
                ctrl.$validate();
            });
            ctrl.$validators.maxDate = function (modelValue, viewValue) {
                console.log('viewValue: ' + viewValue);
                console.log('maximumDate: ' + eval(maximumDate));
                return ctrl.$isEmpty(viewValue);// || viewValue.length >= minlength;
            };
        }
    }
});

viewValue是输入中的值，maximumDate是属性中的值。

我是以ngMinlength directive为基础的。这是原始Angular指令的代码：

var minlengthDirective = function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;

      var minlength = 0;
      attr.$observe('minlength', function(value) {
        minlength = toInt(value) || 0;
        ctrl.$validate();
      });
      ctrl.$validators.minlength = function(modelValue, viewValue) {
        return ctrl.$isEmpty(viewValue) || viewValue.length >= minlength;
      };
    }
  };
};

当然，我的指令只是在验证指令中获取指令值的一个例子，而不是工作的最大日期属性，但细节的实现是简单而不必要的。

如何使用Angular.js中的参数创建验证属性？

4 个答案: