Jak dodać atrybuty sprawdzania poprawności w dyrektywie angularjs

Question

Próbuję napisać dyrektywę kątową, która dodaje atrybuty sprawdzania poprawności do znacznika, ale wydaje się, że nie działa. Oto moje demo. Zauważysz, że "Is Valid" pozostaje prawdziwe, jeśli usuniesz tekst z drugiego pola wejściowego, ale zmieni się na false, jeśli usuniesz tekst z pierwszego pola wprowadzania.

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

Oto moja dyrektywa:

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

zgaduję jestem po prostu brakuje czegoś proste.

Answer 1

Wszystkie zasady sprawdzania poprawności formularza są odczytywane w fazie kompilacji formularza, więc po wprowadzeniu zmian w węźle podrzędnym należy ponownie skompilować dyrektywę form (form jest to dyrektywa niestandardowa w AngularJS). Ale rób to tylko raz, unikaj nieskończonych pętli (funkcja 'link' twojej dyrektywy zostanie wywołana ponownie po kompilacji formularza).

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 robocza: http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview

Answer 2

wiem, że to jest dość stare pytanie, ale za to, co warte, kątowe docs opisać ng-required która przyjmuje wartość logiczną. To rozwiązało podobny problem, jaki miałem.

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

Answer 3

Uważać nieskończonych pętli i recompiles, lepszym rozwiązaniem jest tutaj: 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 Praca jest dostępna pod adresem: http://plnkr.co/edit/Q13bUt?p=preview