Come aggiungere attributi di convalida in una direttiva angularjs

Question

Sto provando a scrivere una direttiva angolare che aggiunge attributi di convalida al tag, ma non sembra funzionare. Ecco la mia demo. Si noterà che "È valido" rimane vero se si elimina il testo nella seconda casella di immissione, ma diventa falso se si elimina il testo nella prima casella di immissione.

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

Qui è la mia direttiva:

angular.module('demo', []) 
.directive('metaValidate', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.attr("required", true); 
     } 
    }; 
}); 

Sto indovinando sto solo perdendo qualcosa di semplice.

Answer 1

Tutte le regole per la convalida del modulo vengono lette in fase di compilazione del modulo, quindi dopo aver apportato le modifiche in un nodo figlio, è necessario ricompilare la direttiva form (form è una direttiva personalizzata in AngularJS). Ma fallo una sola volta, evita loop infiniti (la funzione 'link' della tua direttiva verrà richiamata di nuovo dopo la compilazione del modulo).

angular.module('demo', []) 
.directive('metaValidate', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope,element, attrs) { 
      if (!element.attr('required')){ 
      element.attr("required", true); 
      $compile(element[0].form)(scope); 
      } 
     } 
    }; 
}); 

plunker di lavoro: http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview

Answer 2

So che questo è piuttosto una vecchia questione, ma per quello che vale, la documentazione angolari descrivo ng-required che assume un valore booleano. Questo ha risolto un problema simile che stavo avendo.

http://docs.angularjs.org/api/ng/directive/input

Answer 3

Fare attenzione di cicli infiniti e ricompila, una soluzione migliore è qui: Add directives from directive in AngularJS

angular.module('app') 
    .directive('commonThings', function ($compile) { 
    return { 
     restrict: 'A', 
     terminal: true, //this setting is important to stop loop 
     priority: 1000, //this setting is important to make sure it executes before other directives 
     compile: function compile(element, attrs) { 
     element.attr('tooltip', '{{dt()}}'); 
     element.attr('tooltip-placement', 'bottom'); 
     element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop 
     element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html 

     return { 
      pre: function preLink(scope, iElement, iAttrs, controller) { }, 
      post: function postLink(scope, iElement, iAttrs, controller) { 
      $compile(iElement)(scope); 
      } 
     }; 
     } 
    }; 
    }); 

plunker Lavorare è disponibile all'indirizzo: http://plnkr.co/edit/Q13bUt?p=preview