AngularJS Blur Directive

There is no direct support for blur event in AngularJs. But we can add support for blur event by creating directive.

Add the following directive to your javascript file

app.directive('ngBlur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngBlur']);
    element.bind('blur', function(event) {
      scope.$apply(function() {
        fn(scope, {$event:event});

Then use it in your html template like below

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

And write the function myFunc() in your controller

$scope.myFunc = function(){

Hope this helps you.

For more posts on AngularJs visit:


  1. but there is problem if we use it with datepicker

    1. Yes. Don't apply this directive to date picker.

  2. Here something is new to read and also some very good information... Please keep me updated as much as possible.... ROR Development Company

  3. Thanks a lot for this tutorial... also do check this useful post on how to hack someone's facebook account