Javascript Angular指令,用于在现有DOM元素上动态设置属性
我对Angular有点陌生,所以欢迎对其他方法的反馈 我创建了一个名为ServerMaxLength的指令。当指令放置在ng表单上时,它将从RESTAPI获取数据库字段长度,然后遍历表单控制器中包含的所有输入元素的内容,并相应地设置maxlength属性。该指令如下:Javascript Angular指令,用于在现有DOM元素上动态设置属性,javascript,angularjs,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui Bootstrap,我对Angular有点陌生,所以欢迎对其他方法的反馈 我创建了一个名为ServerMaxLength的指令。当指令放置在ng表单上时,它将从RESTAPI获取数据库字段长度,然后遍历表单控制器中包含的所有输入元素的内容,并相应地设置maxlength属性。该指令如下: myApp.directive('serverMaxLengths', function ($log,$http,$compile) { return { restrict: 'A', require: '^for
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引导Typeahead指令。在应用maxlength之前,该指令按预期工作。但是,在通过上述方法在字段上设置maxlength的应用程序后,提前键入会呈现TypeError:当输入失去焦点时,无法读取未定义错误的属性“length”,否则它会工作。这让我担心这种方法,以及幕后发生的事情
*注意:通过执行以下操作可解决提前输入错误:
$compile(thisElement.contents())(scope);
而不是:
$compile(thisElement)(scope);
感谢您的反馈/建议/想法。添加$CompileThiseElement.contentsscope;解决了主要关注的问题