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烦恼，因为您已经从头开始构建了一些东西。 / p>

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

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

1 个答案: