Ng-blur does not fire parent elements

Question

I am trying to use ng-blur on <tr ng-blur="blurFn()"> but it does not work. It works only for the child <input> .

This does not apply to <tr> or <td> . According to the Angular documentation , ng-blur responds to an event blur that does not bubble. "focusout" event bubbles, but no ng-focusout.

Am I missing something or do I need to create a new directive to handle the focus event?

Here's the code snippet and fiddle :

HTML

 <div ng-app="App"> <div ng-controller="Ctrl as ctrl"> <table> <tr ng-repeat="item in ctrl.items" ng-blur="ctrl.blurFn()"> <td><input ng-model="item.A"/></td> <td><input ng-model="item.B"/></td> </tr> </table> </div> </div> 

Js

 angular.module("App", []) .controller("Ctrl", function(){ this.blurFn = function($event){ console.log($event.target); }; this.items = [ {A: "111", B: "222"}, {A: "111", B: "222"}, {A: "111", B: "222"}, {A: "111", B: "222"}, {A: "111", B: "222"} ]; }); 

Answer 1

One way is to simply create a focus directive.

 angular.module("App", []) .controller("Ctrl", function(){ this.blurFn = function($event){ console.log("Yay, blurred"); this.name = "focessed out at" + $event.target.name; }; this.items = [ {A: "111", B: "222"}, {A: "111", B: "222"}, {A: "111", B: "222"}, {A: "111", B: "222"}, {A: "111", B: "222"} ]; //This is just the way other handlers are defined... }).directive('focusout', ['$parse', function($parse) { return { compile: function($element, attr) { var fn = $parse(attr.focusout); return function handler(scope, element) { element.on('focusout', function(event) { scope.$apply(function() { fn(scope, {$event:event}); }); }); }; } }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> <div ng-app="App"> <div ng-controller="Ctrl as ctrl"> {{ctrl.name}} <table> <tr ng-repeat="item in ctrl.items" focusout="ctrl.blurFn($event)"> <td><input ng-attr-name="A{{$index}}" ng-model="item.A"/></td> <td><input ng-attr-name="B{{$index}}" ng-model="item.B"/></td> </tr> </table> </div> </div> 

You might want to know that the focus event is not supported in firefox.