Question

我正在尝试编写一个角度指令，为标记添加验证属性，但它似乎不起作用。这是我的演示。您会注意到，如果删除第二个输入框中的文本，“Is Valid”仍然为true，但如果删除第一个输入框中的文本则为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）。但只做一次，避免无限循环（你的指令的'链接'函数将在表单编译后再次调用）。

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

Answer 2

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

可以在http://plnkr.co/edit/Q13bUt?p=preview

找到工作人员

Answer 3

我知道这是一个相当古老的问题，但是对于它的价值，角度文档描述ng-required采用布尔值。这解决了我遇到的类似问题。

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

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

3 个答案: