Last Updated: September 27, 2021
·
17.14K
· 0xax

Blur directive in AngularJS

There is no native support for blur event in AngularJS. With this directive you can handle blur event in your AngularJS controllers:

Module.directive('ng-blur', function() {
        return {
            restrict: 'A',
            link: function postLink(scope, element, attrs) {
                element.bind('blur', function () {
                    scope.$apply(attrs.ngBlur);
                });
            }
        };
    });

And use it in html template:

<input type="text" ng-blur="handleInputBlur()"></input>

And handle it in controller:

$scope.handleInputBlur = function(){
   // do some action here
}

@0xAX

5 Responses
Add your response

The directive's name should be ngBlur instead of ng-blur in angular 1.1.3

over 1 year ago ·

don't use "ng" as a prefix.. let the angular.js guys to do it, and use your own prefix :)

over 1 year ago ·

Thank you! This worked perfectly.

over 1 year ago ·

Thank you, this has been very helpful.

over 1 year ago ·

@allain, @martinhaluza glad to help :)

over 1 year ago ·