Как добавить атрибуты проверки в директиву angularjs

Question

Я пытаюсь написать угловую директиву, которая добавляет атрибуты проверки тегу, но, похоже, она не работает. Вот моя демонстрация. Вы заметите, что «Is Valid» остается верным, если вы удаляете текст во втором поле ввода, но при этом выдается сообщение «false», если вы удаляете текст в первом поле ввода.

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

Вот моя директива:

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

Я предполагаю, что я просто не хватает что-то простое.

Answer 1

Все правила проверки формы читаются на этапе компиляции формы, поэтому после внесения изменений в дочерний узел вам необходимо перекомпилировать директиву form (form это настраиваемая директива в AngularJS). Но делайте это только один раз, избегайте бесконечных циклов (функция 'link' вашей директивы будет вызываться снова после компиляции формы).

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

Answer 2

Я знаю, что это довольно старый вопрос, но для чего это стоит, угловые документы описывают ng-required, которая принимает логическое значение. Это решило аналогичную проблему, с которой я столкнулся.

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

Answer 3

Будьте осторожны бесконечных петель и перекомпилирует, лучшим решением здесь: 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 доступна по адресу: http://plnkr.co/edit/Q13bUt?p=preview