角指令来对现有的DOM元素动态地设置属性(一个或多个)(Angular directive to d

2019-10-19 08:19发布

我有点新的角度,等等各种途径反馈肯定是受欢迎的。

我创建了一个名为“serverMaxLengths”指令。 当该指令被置于一个NG-形式时,将取回的数据库字段从一个REST API的长度,然后将引导包含在表单控制器之内的所有输入元素的含量,并且将设置“最大长度”相应属性。 该指令如下:

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(thisElement.contents())(scope);

代替:

$compile(thisElement)(scope);

感谢您的任何意见/建议/想法。

Answer 1:

添加的$编译(thisElement.contents())(范围); 解决了,这是首要关注的问题。



文章来源: Angular directive to dynamically set attribute(s) on existing DOM elements