Question

我的团队使用AngularStrap将Bootstrap模态（例如popover，工具提示等）集成到我们的Angular 1.5应用程序中。不幸的是，我发现由于AngularStrap显示它们的时髦方式，可靠地将焦点集中在这些模态内部的元素上非常困难。这个逻辑住在这里：

https://github.com/mgcrea/angular-strap/blob/b13098d9d658da9408930b25f79182df920718d2/src/tooltip/tooltip.js

基本上，所有AngularStrap模态都以隐藏状态开始：

// Set the initial positioning.  Make the tooltip invisible
// so IE doesn't try to focus on it off screen.
tipElement.css({top: '-9999px', left: '-9999px', right: 'auto', display: 'block', visibility: 'hidden'});

然后，它们会响应一些内部Angular requestAnimationFrame服务回调而显示：

$$rAF(function () {
  // Once the tooltip is placed and the animation starts, make the tooltip visible
  if (tipElement) tipElement.css({visibility: 'visible'});
  ...
});

不幸的是，这意味着在构造所有工具提示的DOM元素时，工具提示通常尚不可见，并且任何在这些元素上调用focus（）的尝试都会失败。请注意，根据我的经验，这种情况会间歇性地发生（约20％的时间对我而言）。

我尝试在工具提示上禁用动画，但在这种情况下跳过这整个隐藏/可见舞蹈似乎并不够聪明。我显然可以尝试一些超级hacky（例如在尝试设置焦点之前使用任意超时），但我正在寻找更可靠的选项。

Answer 1

为什么不使用onShow事件？记录有点错误，但您可以附加一个将元素集中到bs-on-show的处理程序。此外，您可以使处理程序通用，查找具有focus-me属性的元素，并将焦点放在：

<div bs-popover
  data-content='this input should be focused: <input type="text" focus-me>'
  data-placement="bottom"
  bs-on-show="setFocus"
  data-html="true">
    click me to show popover
</div>

<div bs-tooltip
  data-title='this input should be focused: <input type="text" focus-me style="color:#000;">'
  data-placement="bottom"
  data-trigger="click"
  bs-on-show="setFocus"
  data-html="true">
    click me to show tooltip
</div>

通用处理程序

$scope.setFocus = function(e) {
  e.$element.find('[focus-me]').focus()    
}

<强> http://plnkr.co/edit/3wTinmNb5zsKnfUZQ9tT?p=preview

如何可靠地将注意力集中在AngularStrap工具提示内的元素上？

1 个答案: