Question

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

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，标记看起来是正确的，但功能不存在。有什么想法吗？

非常感谢

Answer 1

我只有一点Angular经验（约6周），但我在Angular中做的关于DOM指令的所有内容都很笨拙... ... ... ...

我目前正在使用jQuery（其中没有鸡的funk DOM操作智能）在动态添加ng-attributes之后执行$ compile（在这种情况下，因此为糟糕的bootstrap计算INPUT名称/角度datepicker控件我目前正在使用）：

//# Hook the .calendars object via the required Angular attributes
$('I.icon-calendar').each(function (i, obj) {
    var $s, $p = $(this).parent();

    //# Set the ng-click of the .parent button
    $p.attr('ng-click', "calendars.open($event)");

    //# Setup the calendar INPUT
    $s = $p.siblings('INPUT[datepicker-options]');
    $s.attr('is-open', "calendars.isOpen['" + $s.attr('name') + "']");

    //# Re-$compile the DOM elements so all of the above added Angular attributes are processed
    $compile($s.get(0))($scope);
    $compile($p.get(0))($scope);
});

$ compile需要＆＃34;注入＆＃34; （我讨厌那个词，为什么我们只能说＆＃34;通过＆＃34;？）进入控制器，＆＃39; la：

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

我到目前为止唯一的问题是一些控件/插件等。在$ compile上添加DOM元素，所以目前我正在摔跤多个日期选择器UL.dropdown-menu的龙被添加到DOM，我没有回答（但我确实在这个问题上找到了这个问题）方式，所以那里。）

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

1 个答案: