Javascript 如何使用angularjs指令动态添加表单验证的属性？

我有一个用于验证表单字段的指令。我想用指令动态添加验证。我的指令是这样的：

app.directive('validatedInput', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var constraints = {
                'ng-maxlength' : 10,
                'data-required': ''
            }

            angular.forEach(constraints, function(value, key) {
                element.attr(key, value);
            }

            $compile(element)(scope);
        }
    }
}

这是我的标记：

<input type='number' name='fieldName' ng-model='data.test' validated-input></input>

因此，基本上我想要的是指令将

ng maxlength=10

和

data required='

添加到我的输入元素中，以便验证可以工作（这是一个很小的例子；将来我计划使用服务从后端获取约束对象）。问题是，该指令似乎将属性添加到DOM中，但验证不起作用。换句话说，如果我使用浏览器的开发工具检查HTML，标记看起来是正确的，但功能不存在。有什么想法吗

---

非常感谢

我只有一点角度方面的经验（~6周），但我所看到的关于在角度中执行DOM的指令的一切都像fu…nky chicken一样笨拙

我目前正在使用jQuery（它没有chicken funk DOM manip.wise）在动态添加ng属性后进行$compile（在本例中，输入名称是为我当前使用的蹩脚引导/角度日期选择器控件计算的）：

$compile需要“注入”（我讨厌这个术语，为什么我们不能说“传递”？）到控制器中，a'la:

myApp.factory("Tools", function ($http, $q, $timeout, $compile) {...}

---

到目前为止，我遇到的唯一问题是一些控件/插件等。在$compile上添加DOM元素，所以目前我正在与多个日期选择器UL的龙搏斗。下拉菜单被添加到DOM中，对此我没有答案（但我确实在途中发现了这个问题，所以就这样）.

似乎

$compile

服务是相关的：我试图添加

$compile（元素）（范围）

在forEach循环之后，我收到一条控制台消息，说明

$compile不是函数

$compile不是函数

很可能是因为您没有在指令中注入

$compile

，很抱歉，我确实在指令中注入了$compile。同样的错误创建一个复制问题的演示

myApp.factory("Tools", function ($http, $q, $timeout, $compile) {...}