我有一个要求,只有在输入模糊或按下输入时才应该更新模型,并且错误/成功消息只会在输入之后而不是在输入期间显示。以前我使用 AngularJS 1.2 rc2 并有以下代码:
Javascript:
angular.module('app', []).directive('ngModelOnblur', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
if (attrs.type === 'radio' || attrs.type === 'checkbox') { return; }
var update = function () {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val().trim());
ngModelCtrl.$render();
});
};
element.off('input').off('keydown').off('change').on('focus', function () {
scope.$apply(function () {
ngModelCtrl.$setPristine();
});
}).on('blur', update).on('keydown', function (e) {
if (e.keyCode === 13) {
update();
}
});
}
};
})
.controller('Ctrl', ['$scope', function ($scope) {
$scope.getClass = function (input) {
if (input.$pristine) { return ''; }
return input.$invalid ? 'has-error' : 'has-success';
};
}]);
HTML:
<div ng-controller="Ctrl">
<form name="form" novalidate>
<div ng-class="getClass(form.firstname)">
<input type="text" name="firstname" ng-model="firstname" ng-model-onblur ng-pattern="/^\d{4}$/" />
<div class="error">error</div>
<div class="success">success</div>
$pristine: {{form.firstname.$pristine}}
</div>
</form>
</div>
CSS:
.error, .success {
display: none;
}
.has-error .error, .has-success .success {
display: block;
}
但自从我升级到 RC3 后,事情就开始崩溃了。尽管我删除了输入、更改和按键输入的事件处理程序,但 $pristine 在输入期间仍设置为 false,因此将显示消息。
我尝试为指令设置terminal: true
, priority: -1
,但它仍然不起作用。我究竟做错了什么?
这是 plunker:http ://plnkr.co/edit/8FliNc?p=preview
提前致谢