Достижение фокуса с помощью ngFocus в Angular

Question

У меня поиск , и я не нахожу правильный способ вызвать ngFocus, если какой-либо элемент или дочерние элементы сфокусированы (как focus-within в CSS).

Мой вариант использования таков, что у меня есть всплывающее окно, которое мне нужно запускать, когда пользователь вкладывает, и мне нужно, чтобы это всплывающее окно позволяло переключаться между различными кнопками и ссылками внутри всплывающего окна.

Вот скрипка моей проблемы. Вы заметите, что если вы наведите курсор мыши на текст «Trigger Popover», который я настроил, чтобы поддерживать всплывающее окно в активном состоянии и позволять вам нажимать на что-либо внутри этого поповера. Однако, если вы перейдете в этот всплывающий список, он исчезнет, ​​потому что ng-focus не запускается, так как моя ссылка является child элемента ng-focus.

Хотя я знаю, что могу добавить ng-focus и ng-blur , как это , к своим дочерним элементам и вызывать функции для решения моей проблемы, это может привести к большому дублированию, если я есть много разных кнопок в поповере.

Возможно ли получить focus-within -функцию с ngFocus или с каким-либо другим событием?

Вот мой HTML:

<a href="#" 
   ng-mouseover="showPopover()"
   ng-mouseout="hidePopover()"
   ng-focus="showPopover()"
   ng-blur="hidePopover()">
    <!-- Popover will open if you tab/hover into here -->
    Trigger Popover
</a>
<popover popover-show="popoverIsOn">
   <div class="arrow"></div>
   <div class="custom-popover-content"
        ng-mouseover="keepPopoverAlive()"
        ng-mouseout="killPopover()"
        ng-focus="keepPopoverAlive()"
        ng-blur="killPopover()">
          <!-- Popover closes when a user tabs into me because I don't trigger the focus of my parent -->
          <a href="#">You can tab into me but I disappear!</a>
   </div>
</popover>

Мой JS:

// I don't get called from ng-focus when a user tabs into the link within the popover
$scope.keepPopoverAlive = function() {
   $scope.popoverHovered = true;
};