Last Updated: September 27, 2021
· 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 () {

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


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 ·