一种这样做的方式
是使用ngModelController提供的$parsers
数组。它被设计为影响模型值(通过其返回值)的地方,但是它也可以用作输入事件的侦听器。
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;
});
}
}
});
但是,我不确定这种用法$parsers
是否有点骇人听闻。该指令可以用作:
<input type="text" clean-input ng-model="name">
<input type="text" clean-input ng-model="name" ng-change="onChange()">
可以在http://plnkr.co/edit/dAJ46XmmC49wqTgdp2qz?p=preview中查看实际使用情况