Question

我对Angular有点新手，所以对替代方法的反馈肯定是受欢迎的。

我创建了一个名为“serverMaxLengths”的指令。当指令放在ng-form上时，它将从REST API获取数据库字段长度，然后将遍历表单控制器中包含的所有输入元素的内容，并相应地设置“maxlength”属性。该指令如下：

myApp.directive('serverMaxLengths', function ($log,$http,$compile) {
return {
    restrict: 'A',
    require: '^form',
    link: function (scope, elem, attrs, formController) {
        if (!formController) return;


        var httpConfig = {
            method: 'GET',
            url: myAppRestURL + "/validator-rest?action=getDBFieldLengths"
        };

        $http(httpConfig)
            .success(function (data, status, headers, config) {

                if (typeof data.isValid != 'undefined') {
                    if(data.isValid){
                        var inputElem = elem.find('input');
                        angular.forEach(inputElem, function (value, key) {
                            var thisElement = angular.element(value);
                            if (typeof thisElement[0] !== 'undefined') {
                                if(typeof data.dbFieldLengths[thisElement[0].id] !== 'undefined'){
                                    if(data.dbFieldLengths[thisElement[0].id] > 0){
                                        thisElement.prop("maxlength", data.dbFieldLengths[thisElement[0].id]);
                                        thisElement.prop("ng-maxlength", data.dbFieldLengths[thisElement[0].id]);
                                        thisElement.prop("ng-minlength", 0);
                                        $compile(thisElement)(scope);
                                    }
                                }
                            }
                        });
                    }else{
                        ...
                    }
                }else{
                    ...
                }


            }).error(function (data, status, headers, config) {
                ...
            });

    }
};});

这很有效。据我所知，$ compile正在执行指令时替换现有元素。

我想知道实现这一目标的更好的“角度”方式是什么？我想要一个非常简单的解决方案，它不需要将指令放在任何实际的输入元素上（我想要一次性完成所有事情）。

最后，获得最大长度设置的字段之一具有分配给它的UI Bootstrap Typeahead指令。在应用“maxlength”之前，该指令按预期工作。但是，通过前面提到的方法在字段上设置“maxlength”的后应用，当输入失去焦点时，类型提前“渲染”TypeError：无法读取未定义的属性“长度”错误（否则它可以工作）。这让我关注这种方法，以及幕后发生的事情。

*注意：通过执行以下操作解决了类型提前错误：

$compile(thisElement.contents())(scope);

而不是：

$compile(thisElement)(scope);

感谢您提出任何意见/建议。

Answer 1

添加$ compile（thisElement.contents（））（范围）;解决了主要关注的问题。

Angular指令，用于动态设置现有DOM元素的属性

1 个答案: