模态中的角度焦点和输入在另一个模态之上

Question

您好，我有一个专注于输入模式的指令。当它是单一模态时，焦点效果很好。在一个例子中，虽然我有一个模态，然后单击此模态上的按钮会在顶部触发另一个模态。然后焦点不起作用。

有什么想法吗？

这是我的代码：

.directive('auto-focus', function ($timeout) {
  return {
    restrict: 'A',
    link: function(scope, el) {
      var whiteList = ['input', 'a', 'textarea', 'div']
        , tagToFocus = el[0].tagName.toLowerCase()
        , allow = whiteList.indexOf(tagToFocus) > -1;

      if (!allow) {
        throw new Error(`Autofocus is not allowed on ` + tagToFocus);
     }

    $timeout(() => el[0].focus(), 50);
  }
}

Answer 1

我认为你的指令没问题，问题可能是你打开模式的方式。

我猜第二个模态已经使用rendered html。假设您在页面某处隐藏了 html 模板。如果您的第二个模态使用该隐藏的 html 模板，那么 focus 将不起作用！你可以通过console.log你的元素来检查这个。

如果您的第二个模态使用您的第一个模态 html 的任何部分，它也不会工作！

所以这仅适用于新注入的 html，或者您必须在模式打开后重新运行您的指令。

查看此Demo 以获得进一步说明。

Answer 2

我假设指令auto-focus 会发生在两个弹出窗口中。这意味着两个指令都在争夺焦点，而后来执行的指令获胜。这是我的猜测。

所以我会尝试延迟稍后弹出的focus()。

您可以使用可选的timeout 参数添加参数化auto-focus 指令。如果未提供，则默认为 50 毫秒。如果提供，则将使用自定义值。

然后，您的第二个弹出窗口中的 html 将如下所示：

<div> ....
 <input auto-focus timeout="250"/>
</div>

像这样更新你的指令

//just a draft :)
....
restrict: 'A',
scope: {
 timeout: '=' //This will create new isolate scope
}
link: function(scope, el) {
 if (scope.timeout == undefined) {
  //set default value
  scope.timeout = 50;
 }
 else {
  scope.timeout = parseInt(scope.timeout, 10);
....

 }