angularjs - 如何确定给定 div 中的某些内容是否具有焦点？

Question

使用 angularjs，我显示了一个像这样的 2 级列表

- first main item
  - first subitem of the first main item
  - second subitem of the first main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM
- second main item
  - first subitem of the second main item
  - second subitem of the second main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM

为了节省空间，我想仅当相应 div 中的任何内容具有焦点时才显示 PLACEHOLDER，这样只有一个这样的占位符。我知道有 ngFocus，但我更喜欢比创建大量事件处理程序更简单的东西。也许是这样的:

<div ng-focus-model="mainItem.hasFocus" ng-repeat="mainItem in list">
   ... main item line
   ... all subitems
</div>

单向绑定(bind)就足够了，因为我不需要设置焦点。

Answer 1

这里的问题如下；我们希望避免向每个子级添加事件监听器，而仅将其添加到父级。家长将负责采取适当的行动。对此的一般解决方案是使用均匀传播(委托(delegate))。我们只将一个监听器附加到父级，当子级发生事件时(在本例中关注焦点输入元素)，它将冒泡到父级，并且父级将执行监听器。

这是指令:

app.directive('ngFocusModel', function () {
    return function (scope, element) {

      var focusListener = function () {
          scope.hasFocus = true;
          scope.$digest();
      };

      var blurListener = function () {
          scope.hasFocus = false;
          scope.$digest();
      };


      element[0].addEventListener('focus', focusListener, true);
      element[0].addEventListener('blur', blurListener, true);
   };
});

该指令监听事件并相应地设置范围值，以便我们可以进行有条件的更改。

这里有几件事需要注意。

focus 和 blur 事件不会“冒泡”，我们需要使用“事件捕获”来捕获它们。这就是为什么不使用 element.on('focus/blur') (据我所知，它不允许捕获)而是使用 addEventListener 方法。此方法允许我们通过将第三个参数相应地设置为 false 或 true 来指定监听器是在“事件冒泡”还是“事件捕获”上执行。

我们本可以使用“冒泡”的 focusin 和 focusout 事件，不幸的是 Firefox 不支持这些事件( focusin 和 focusout )。

这是一个plunker与实现。

更新:我想到这可以使用 :focus 伪类通过纯 CSS 来完成，唯一的缺点是占位符需要位于相对于输入元素的正确位置(同级)。请参阅codepen .