带有input元素的AngularJS自定义指令,从外部传递验证器

Question

我在我的应用程序中使用一个简单的自定义指令来修改输入字段:

app.directive('editor', function() {
    return {
        restrict: 'E',
        templateUrl: 'editor.html',
        scope: { value: '=' }
    };
});

所述editor.html基本上创建一个input与附加控制元件.简化它看起来像这样:

<div>
    <input ng-model="value">
    <!-- more code here -->
</div>

我使用了访问我的指令<editor value="{{object.name}}"></editor>.这很完美.现在我需要对输入执行不同的验证.使用的必要验证器各不相同,所以我希望能够将实际的验证器传递给我的指令.就像是:

<editor value="{{object.name}}" validator-a validator-b></editor>

要么

<editor value="{{object.name}}" validators="validatorA,validatorB"></editor>

我怎么能实现这一目标？

Answer 1

您正在创建自定义输入控件,因此您可能也支持ng-model- 这是正确的做法.

而且,验证器 - 内置和自定义 - 仅require: "ngModel"用于它们的功能,它们与底层DOM实现独立(按设计),因此ng-model自动支持所有ng-model基于验证器的验证器.

获得ng-model支持也将使您的指令参与form验证.

由于你在模板中使用了一个现有的指令(即<input>),你甚至不需要打扰DOM,就像你从头开始构建一些东西一样.

app.directive("editor", function(){
  return {
    require: "?ngModel",
    scope: true,
    template: "<input ng-model='value' ng-change='onChange()'>",
    link: function(scope, element, attrs, ngModel){
      if (!ngModel) return;

      scope.onChange = function(){
        ngModel.$setViewValue(scope.value);
      };

      ngModel.$render = function(){
        scope.value = ngModel.$modelValue;
      };
    }
  };
});

然后您可以直接应用验证器:

<editor ng-model="foo" minlength="3"></editor>

http://plnkr.co/edit/k21Oem6kT8SXUefyhbI6?p=preview