Пользовательская директива AngularJS со входным элементом, проверка валидатора со стороны

Я использую простую настраиваемую директиву для измененного поля ввода, которое встречается во всем приложении:

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>

Как я мог достичь этого?

ОТВЕТЫ

Ответ 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