如何在angularjs指令中添加验证属性?

I am trying to write an angular directive that adds validation attributes to the tag, but it doesn't seem to be working. Here is my demo. You will notice that "Is Valid" remains true if you delete the text in the second input box, but goes to false if you delete the text in the first input box.

我正在尝试编写一个角化指令，将验证属性添加到标记中，但它似乎没有工作。这是我的演示。如果在第二个输入框中删除文本，您将注意到“Is Valid”仍然为真，但是如果在第一个输入框中删除文本，则变为false。

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

Here is my directive:

这是我的指令:

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

I'm guessing I am just missing something simple.

我猜我只是错过了一些简单的东西。

3 个解决方案

#1

All rules for validation of the form are being read in compilation phase of the form, so after making changes in a child node, you need to recompile form directive (form it's a custom directive in AngularJS). But do it only once, avoid infinite loops (your directive's 'link' function will be called again after form's compilation).

窗体的所有验证规则都是在窗体的编译阶段读取的，因此在子节点中进行更改之后，需要重新编译窗体指令(form it是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);
          }
        }
    };
});

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

工作恰好:http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview

#2

Be careful of infinite loops and recompiles, a better solution is here: Add directives from directive in AngularJS

要注意无限循环和重新编译，这里有一个更好的解决方案:添加来自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);
          }
        };
      }
    };
  });

Working plunker is available at: http://plnkr.co/edit/Q13bUt?p=preview

可在:http://plnkr.co/edit/q13but?

#3

I know this is quite an old question, but for what it's worth, the angular docs describe ng-required which takes a boolean value. This solved a similar problem I was having.

我知道这是一个很老的问题，但不管怎么说，角文档描述的是ng-required，需要一个布尔值。这解决了我遇到的一个类似的问题。

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

#1

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