zve9vq
Last Updated: February 25, 2016
·
13.98K
· 0xax
2699235

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

Say Thanks
Respond

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
Fe757c8b244660deb28c3ef6330cb51e

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
0edfb9def335b533bedb791235a9c5bd

Thank you! This worked perfectly.

over 1 year ago ·
7697
Default profile 0 normal

Thank you, this has been very helpful.

over 1 year ago ·
7699
2699235

@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 ·