我的指令有问题。该指令的目的是轻松添加验证，而无需手动将 ng-class （除其他外）添加到元素中以便显示错误状态。我只是想在我的元素上放置一个“验证”指令，并在出现错误状态时生成适当的类（和错误消息）。
就验证而言，它运行良好，但会产生奇怪的副作用。每当我在带有验证指令的输入框中编辑值时，它会将插入符号移动到输入字段中文本的末尾。事实似乎是我正在编译该元素（在本例中为包含该元素的父元素）。
这是一个jsbin http://jsbin.com/xarotaju/4/edit显示问题。要重现，请在字段中键入一个值，然后将脱字符号放在刚刚键入的值的中间，然后尝试键入另一个字符。请注意，它会将您移至字段的末尾。请注意，如果删除该值，字段标签将按预期变为红色以显示验证错误（该字段是必需的）。
这是指令（来自 jsbin）：
angular.module('app', [])
.directive('validation', function($compile) {
return {
require: 'ngModel',
restrict: 'A',
compile: function(compileElement, attrs) {
var formName = compileElement[0].form.name;
compileElement.removeAttr('validation');
compileElement.parent().attr('ng-class', formName + "['" + attrs.name + "'].$invalid && " + formName + "['" + attrs.name + "'].$dirty ? 'error' : ''");
return function(scope, element) {
$compile(element.parent())(scope);
}
}
};
});
这是 html：
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body ng-app="app">
<form name="subscribeForm">
<label>
First Name
<input type="text"
id="firstName"
name="firstName"
ng-model="userInfo.FirstName"
required
validation/>
</label>
</form>
</body>
</html>
不确定你是否已经弄清楚这一点，但我遇到了类似的问题。找到了解决方案使用 angularjs 保留光标位置 https://stackoverflow.com/questions/22940346/preserving-cursor-position-with-angularjs。为方便起见，下面是解决此问题的指令片段。
app.directive('cleanInput', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
var el = element[0];
function clean(x) {
return x && x.toUpperCase().replace(/[^A-Z\d]/g, '');
}
ngModelController.$parsers.push(function(val) {
var cleaned = clean(val);
// Avoid infinite loop of $setViewValue <-> $parsers
if (cleaned === val) return val;
var start = el.selectionStart;
var end = el.selectionEnd + cleaned.length - val.length;
// element.val(cleaned) does not behave with
// repeated invalid elements
ngModelController.$setViewValue(cleaned);
ngModelController.$render();
el.setSelectionRange(start, end);
return cleaned;
});
}
}
});
该指令有不同的目的，因此请根据您的要求进行修改。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
