在AngualrJS中实现maxlength样式指令时,可以在文本框的中间键入一个字符 - 这会导致指令触发并且总字符串被截断为最大长度 - 但是,因为新字符在丢失的角色不是刚输入的那个。
myAppModule.directive('myMaxlength', ['$compile', '$log', function($compile, $log) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
attrs.$set("ngTrim", "false");
var maxlength = parseInt(attrs.myMaxlength, 10);
ctrl.$parsers.push(function (value) {
$log.info("In parser function value = [" + value + "].");
if (value.length > maxlength)
{
$log.info("The value [" + value + "] is too long!");
value = value.substr(0, maxlength);
ctrl.$setViewValue(value);
ctrl.$render();
$log.info("The value is now truncated as [" + value + "].");
}
return value;
});
}
};
}]);
这个小提琴(不是我的)显示了这样一个使用指令:
http://jsfiddle.net/ksevksev/J7MJF/
要重现,只需在中间键入一个字母,然后查看输出模型的更改。这里所希望的行为是,如果内容已经处于maxlength,则阻止用户在文本区域中键入其他字符 - 即该指令的行为应与MaxLength属性在Firefox / Chrome中的工作方式相同
有没有办法连接AngularJS指令,以便我们可以检测字符是在末尾还是在中间添加并相应地截断?我不确定如何在指令中访问模型的原始值,但这至少可以进行一些比较
(我知道在Chrome和Firexfox中使用默认的HTML MaxLength属性会导致此指令无效 - 但我需要支持未实现MaxLength的IE7。)