我如何使用angularjs指令为表单验证动态添加属性？ [英] How can I use an angularjs directive to dynamically add attributes for form validation?

问题描述

我已经得到了我使用验证表单字段指令。我想用动态指令添加验证。这里是我的指令是什么样子：

I've got a directive that I'm using to validate form fields. I want to dynamically add the validation with the directive. Here's what my directive looks like:

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 和数据所需=''我的输入元素，以便验证可以工作（这是一个很小的情况下，在未来我计划获得通过服务从后端的约束对象）。问题是，该指令似乎添加属性到DOM，但验证不工作。换句话说，如果我用我的浏览器的开发工具检查HTML，标记看起来是正确的，但功能是不存在的。有什么想法？

So basically what I want is for the directive to add ng-maxlength=10 and data-required='' to my input element so that the validation can work (this is a trivial case; in the future I plan on getting the constraints object from the back-end using a service). The problem is, the directive seems to add the attributes to the DOM, but the validation doesn't work. In other words, if I inspect the HTML using my browser's dev tools, the markup looks correct, but the functionality isn't there. Any thoughts?

大部分AP preciated

Much appreciated

推荐答案

我只是有一点经验的角度（〜6周），但我的问候指令做DOM的角度看到的一切是笨重的福... NKY鸡...

I only have a bit of Angular experience (~6 weeks), but everything I've seen in regards to Directives to do DOM in Angular is clunky as fu...nky chicken...

我这样做目前使用jQuery（具有零鸡临阵脱逃DOM MANIP。WISE）做$编译后动态加入NG-属性（在这种情况下，所以输入名称是糟糕的引导来计算/角日期选择器控制我使用当前）：

I'm doing this currently with jQuery (which has zero chicken funk DOM manip. wise) to do a $compile after dynamically adding ng-attributes (in this case so the INPUT name is calculated for the crappy bootstrap/angular datepicker control I'm using currently):

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

$编译需要注入（我讨厌这个词，为什么我们不能只说通过？）到控制器，HRS欧洲：

$compile needs to be "injected" (I hate that term, why can't we just say "passed"?) into the controller, a'la:

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

到目前为止我有唯一的问题是一些控件/插件/等。加上$编译DOM元素，所以我目前摔跤的龙多日期选择器UL.dropdown菜单的被添加到DOM，对此我没有答案（但我没有找到的方式这个问题，所以有说）

The only issue I've had thus far is some controls/plugins/etc. add DOM elements on $compile, so currently I'm wrestling the dragon of multiple datepicker UL.dropdown-menu's being added to the DOM, to which I have no answer (but I did find this question on the way, so there's that).

这篇关于我如何使用angularjs指令为表单验证动态添加属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！