带有输入元素的AngularJS自定义指令，从外部传递验证器 [英] AngularJS custom directive with input element, pass validator from outside

问题描述

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

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>

我该如何实现?

解决方案

您正在创建自定义输入控件，因此您最好也支持ng-model-这是正确的选择.

并且，验证器(内置和自定义)仅针对功能require: "ngModel"，并且它们(根据设计)独立于底层DOM实现，因此具有ng-model会自动支持所有基于ng-model的验证器./p>

获得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

I'm using a simple custom directive for a modified input field which occurs throughout my application:

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

The editor.html basically creates an input element with additional controls. Simplified it looks like this:

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

I access my directive using <editor value="{{object.name}}"></editor>. This works perfect. Now I need to perform different validations on the input. The necessary validators to use vary, so I would like to be able to pass the actual validators to my directive. Something like:

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

or

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

How could I achieve that?

解决方案

You are creating a custom input control, so you might as well support ng-model - which is the right thing to do.

And, validators - built-in and custom - only require: "ngModel" for their function and they are independent (by design) from the underlying DOM implementation, so having ng-model automatically supports all ng-model-based validators.

Having ng-model support will also make your directive participate in form validation.

Since you are using an existing directive inside the template (i.e. <input>), you don't even need to bother with DOM, as you would've had you built something from scratch.

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;
      };
    }
  };
});

Then you can just apply validators directly:

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

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

这篇关于带有输入元素的AngularJS自定义指令，从外部传递验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！