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

Я пытаюсь написать директиву angular, которая добавляет атрибуты проверки тегу, но, похоже, не работает. Вот моя демонстрация. Вы заметите, что "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);
        }
    };
});

Я предполагаю, что я просто пропустил что-то простое.

Ответы

Ответ 1

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

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

Рабочий плункер: http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview

Ответ 2

Будьте осторожны с бесконечными циклами и перекомпиляциями, лучшее решение здесь: Добавить директивы из директивы в 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);
          }
        };
      }
    };
  });

Рабочий плункер доступен по адресу: http://plnkr.co/edit/Q13bUt?p=preview

Ответ 3

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

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