W tym poście przedstawiono przykład dyrektywy, która opóźnia zmiany modelu na dane wejściowe do momentu uruchomienia zdarzenia rozmycia .
Oto skrzypce, które pokazują zmianę ng działającą z nową dyrektywą ng-model-on-blur. Zwróć uwagę, że jest to niewielka modyfikacja oryginalnych skrzypiec .
Jeśli dodasz dyrektywę do swojego kodu, zmienisz swoje powiązanie na to:
<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />
Oto dyrektywa:
angular.module('app', []).directive('ngModelOnblur', function() {
return {
restrict: 'A',
require: 'ngModel',
priority: 1,
link: function(scope, elm, attr, ngModelCtrl) {
if (attr.type === 'radio' || attr.type === 'checkbox') return;
elm.unbind('input').unbind('keydown').unbind('change');
elm.bind('blur', function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
});
}
};
});
Uwaga: jak @wjin wspomina w komentarzach poniżej, ta funkcja jest obsługiwana bezpośrednio w Angular 1.3 (obecnie w wersji beta) przez ngModelOptions
. Zobacz dokumentację, aby uzyskać więcej informacji.