web-dev-qa-db-ja.com

入力要素を持つ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>

どうすればそれを達成できますか？

javascriptangularjsvalidation
19
qqilihq

カスタム入力コントロールを作成しているので、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

27
New Dev