zve9vq
Last Updated: February 25, 2016
·
15.56K
· 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

6 Responses
Add your response

7047

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

over 1 year ago ·
7248

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

over 1 year ago ·
7443

Thank you! This worked perfectly.

over 1 year ago ·
7697

Thank you, this has been very helpful.

over 1 year ago ·
7699

@allain, @martinhaluza glad to help :)

over 1 year ago ·
9747

Hey. This is working fine. Thanks

I found other directory for Blur. Check it here : http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html

over 1 year ago ·