Question

我正在尝试为我的角应用添加验证器。我可以在输入上设置它们，但是一旦我尝试将值绑定到指令它就无法正常工作。

directives.directive('text', function() {
  return {
    restrict: 'AE',
    require: '^parentForm',
    scope: {
      formField: "=",
      modelField: "=",
      onChange: '&',
      isDisabled: '=',
      isRequired: '=',
      isGeneric: '=',
      inputId: '@',
      inputPlaceholder: '=',
      maxlength: '=',
    },
    transclude: true,
    templateUrl: 'text.html',
    link: genericLinkFx()
  };
});

genericLinkFx是：

var genericLinkFx = function(manipulator) {

  return function(scope, element, attrs, snGenericForm) {

    scope.cls = attrs.cls;

    if (angular.isDefined(scope.isRequired)) {
      scope.required = scope.isRequired;
    } else if (!scope.formField.metadata.can_be_blank) {
      scope.required = true      
    } else {
      scope.required = false;
    };

    if (scope.formField.metadata.validators.length > 0) {
      _.each(scope.formField.metadata.validators, function(validator) {
        switch (validator.type) {
          case 'RegexValidator':
            scope.pattern = '/' + validator.regex + '/';
            break;
          case 'MaxLengthValidator':
            scope.maxlength = validator.limit_value;
            break;
          case 'MinLengthValidator': 
            scope.minlength = validator.limit_value;
            break;
        } 
      })
    };
   }
  }

};

模板是：

<input type="text" id="{{ inputId }}" class="{{ cls }}" ng-model="modelField"
    ng-disabled="isDisabled" ng-required="required"
    placeholder="{{ inputPlaceholder }}" 
    ng-maxlength="maxlength">
    {{ maxlength }}, {{ pattern }}
</input>

令人沮丧的是，我可以看到{{maxlength}}被设置但我无法使用它。如果我硬编码ng-maxlength="10"它就可以了。但是，ng-maxlength=maxlength无法按预期工作

Answer 1

如上所述：

如果你想利用ng-maxlength和2路绑定maxlength属性，你需要两者：

ng-maxlength="{{maxlength}}" maxlength="maxlength"

指令和HTML属性。

在链接功能范围中设置角度验证器

1 个答案: