ng-blur 不在父元素上触发

Question

我正在尝试在 <tr ng-blur="blurFn()"> 上使用 ng-blur，但它不会触发。它仅在子 <input> 元素上触发。

这并不特定于 <tr> 或 <td>。根据 Angular documentation 的说法，ng-blur 对 blur event 做出反应，这不会“冒泡”。 "focusout" 事件冒泡，但没有 ng-focusout。

我是否遗漏了什么或者我需要创建一个新指令来处理焦点事件？

这里是代码 sn-p 和 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

一种方法是创建自己的焦点输出指令。

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>

您可能想知道，Firefox 不支持 focusout 事件。