web-dev-qa-db-fra.com

Directive personnalisée AngularJS avec élément d'entrée, passer le validateur de l'extérieur

J'utilise une simple directive personnalisée pour un champ de saisie modifié qui se produit tout au long de mon application:

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

Le editor.html crée essentiellement un élément input avec des contrôles supplémentaires. Simplifié, cela ressemble à ceci:

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

J'accède à ma directive en utilisant <editor value="{{object.name}}"></editor>. Cela fonctionne parfaitement. Maintenant, je dois effectuer différentes validations sur l'entrée. Les validateurs nécessaires à utiliser varient, donc je voudrais pouvoir transmettre les validateurs réels à ma directive. Quelque chose comme:

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

ou

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

Comment pourrais-je y parvenir?

javascriptangularjsvalidation
19
qqilihq

Vous créez un contrôle d'entrée personnalisé, vous pouvez donc aussi prendre en charge ng-model - ce qui est la bonne chose à faire.

Et, les validateurs - intégrés et personnalisés - uniquement require: "ngModel" pour leur fonction et ils sont indépendants (par conception) de l'implémentation DOM sous-jacente, donc avoir ng-model prend automatiquement en charge tous les ng-model- validateurs.

La prise en charge de ng-model fera également participer votre directive à la validation de form.

Puisque vous utilisez une directive existante dans le modèle (c'est-à-dire <input>), vous n'avez même pas besoin de vous embêter avec DOM, comme vous l'auriez fait si vous aviez construit quelque chose à partir de zéro.

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

Ensuite, vous pouvez simplement appliquer des validateurs directement:

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

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

27
New Dev