ng-blur不会在父元素上触发

Question

I'm trying to use ng-blur on a <tr ng-blur="blurFn()"> but it doesn't fire. It fires only on the child <input> element.

This is not specific to <tr> or <td> . According to Angular documentation , ng-blur reacts to the blur event , which doesn't "bubble". "focusout" event bubbles, but there is no ng-focusout.

Am I missing something or do I need to create a new directive to handle focusout 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 would just be to create a focus out directive of your own.

 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 may want to be aware of the fact that, focusout event is not supported in firefox.