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

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

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

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

然后你的第二个弹出窗口中的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);
....

 }

Answer 2

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

我猜第二个模态已经使用rendered html。假设您在页面的某个位置隐藏了html模板。如果您的第二个模态使用隐藏的html模板，那么focus将无法正常工作！您可以通过console.log元素来检查。

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

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

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

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

2 个答案: