AngularJS Brauch mit Eingabeelement Richtlinie passiert Validator von außen

Question

Ich bin eine einfache benutzerdefinierte Richtlinie für ein modifizierten Eingabefeld verwendet, die während meiner Anwendung kommt:

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

Das editor.html im Grunde schafft ein input Element mit zusätzlichen Kontrollen . Vereinfacht sieht wie folgt aus:

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

ich auf meine Direktive <editor value="{{object.name}}"></editor>. Das funktioniert perfekt. Jetzt muss ich verschiedene Validierungen für die Eingabe durchführen. Die zu verwendenden Validatoren variieren, daher würde ich gerne die tatsächlichen Validatoren meiner Richtlinie übergeben können. Etwas wie:

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

oder

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

Wie kann ich das erreichen?

Answer 1

Sie erstellen ein benutzerdefiniertes Eingabesteuerelement, sodass Sie auch ng-model unterstützen können - was richtig ist.

Und Validierer - integrierte und individuelle - nur require: "ngModel" für ihre Funktion und sie sind unabhängig (von Design) von der zugrunde liegenden DOM-Implementierung, so hat ng-model automatisch alle ng-model -basierte Validatoren unterstützt.

Mit ng-model Unterstützung wird auch Ihre Richtlinie teilnehmen an form Validierung.

Da Sie eine vorhandene Anweisung innerhalb der Vorlage verwenden (d. H. <input>), müssen Sie sich nicht einmal mit DOM befassen, da Sie etwas von Grund auf neu erstellt hätten.

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

Dann können Sie einfach anwenden Validatoren direkt:

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

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