Как использовать onBlur на столе?

Question

Я создал директиву angularJS, в которой есть таблица HTML, которая в некоторых случаях должна быть скрыта.Я хочу скрыть таблицу, когда на странице есть щелчок, кроме самой таблицы.Я сделал это так, я установил атрибут tabindex (-1) на таблицу, затем добавил функцию ng-blur.Он отлично работает в Chrome и Firefox, но у меня проблема с IE 11, когда я нажимаю на таблицу, она скрывается.

мой код:

HTML:

<table id="WizardGrid" tabindex="-1" class="table table-striped table-bordered table-condensed table-hover" ng-blur="vm.onBlur($event)">

контроллер:

self.onBlur = function ($event) {
            self.showWizardWindow = false;
            console.log($event);
 };

В конце концов я хочу сосредоточиться на столе ина потерянном фокусе, чтобы скрыть, когда я нажимаю на стол (tr, td и т. д.), чтобы остаться в режиме показа.

Answer 1

На мой взгляд, ng-blur не очень хорошая идея для этого случая, и @isherwood прав !, но мы можем использовать пользовательские директивы, такие как clickOff, для случая, когда нам нужно вызвать действие клика за пределами нашей цели, я надеюсь, что это полезно дляты мой друг.

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.outsideTable = function(){
    console.log("outside table")
  }
  
  $scope.insideTable = function(){
    console.log("inside table")
  }
})


app.directive("clickOff", ["$parse", "$document", function ($parse, $document) {
    var dir = {
        compile: function ($element, attr) {
            // Parse the expression to be executed
            // whenever someone clicks _off_ this element.
            var fn = $parse(attr["clickOff"]);
            return function (scope, element, attr) {
                // add a click handler to the element that
                // stops the event propagation.
                element.bind("click", function (event) {
                    event.stopPropagation();
                });
                angular.element($document[0].body).bind("click", function (event) {
                    scope.$apply(function () {
                        fn(scope, { $event: event });
                    });
                });
            };
        }
    };
    return dir;
}]);

main {
  height: 100vh;
  background: #eee;
}

table {
  width: 100%;
}

table tr td, table tr th {
  border: solid 1px #ccc;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<main ng-app="app" ng-controller="ctrl">

  <table click-off="outsideTable()" ng-click="insideTable()">
      <tr>
        <th>Table</th>
      </tr>
      <tr>
        <td>ngMouseLeave custom directive</td>
      </tr>
  </table>
</main>