我正在尝试编写一个向标签添加验证属性的角度指令，但它似乎不起作用。这是我的演示。您会注意到，如果您删除第二个输入框中的文本，“Is Valid”仍然为 true，但如果您删除第一个输入框中的文本，则“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);
}
};
});
我猜我只是缺少一些简单的东西。
表单的所有验证规则都在表单的编译阶段被读取，因此在子节点中进行更改后，您需要重新编译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
小心无限循环和重新编译，这里有一个更好的解决方案：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
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.