Angular directive - update on blur
Angularjs has instant updating by default, how to disable it?
by robertjd
HTML
<html ng-app="MyApp">
<body>
<div ng-controller='MyCtrl'>
<input type="text" ng-model="name" ng-model-onblur/>
<hr/>
Hello, {{name}}!
</div>
</body>
</html>
CSS
</style>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
<style>
JavaScript
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
}]);
// override the default input to update on blur
app.directive('ngModelOnblur', function() {
return {
restrict: 'A',
require: 'ngModel',
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());
});
});
}
};
});