Angular Bootstrap模态框自动聚焦无效。

Question

我已经使用angular bootstrap实现了一个bootstrap模态框，它工作得很好。

这里是我使用的plunker链接的代码。

在我的模态框中，我只有一个需要用户填写的输入字段（文本框），以及保存和取消按钮。我希望当模态框显示时，文本框应该获得焦点。

我尝试过autofocus属性，但在这种情况下不起作用。

以下是我的模态框上的html粘贴。

<div class="modal-header panel panel-heading">
    <button type="button" class="close" ng-click="ok()">×</button>
    <h4 class="modal-title">Add Project</h4>
</div>
<div class="modal-body">
    <input autofocus="autofocus" type="text" class="form-control" id="ProjectName" placeholder="Enter project name here" data-ng-model="ProjectName" tab-index="1"/>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()" tab-index="2">Create</button>
    <button class="btn btn-default" ng-click="cancel()" tab-index="3">Cancel</button>
</div>

我该怎么让这个工作起来？

- Yasser Shaikh

---

你好 @yasser，你能看到我链接中的焦点吗？我认为我已经提供了你所需要的工作演示。请评论你的看法。谢谢。 - Sudarshan Kalebere

Answer 1

这里有一个包含修复的plunker链接：你需要为其创建一个指令。

app.directive('focusMe', function($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        console.log('value=',value);
        if(value === true) { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
      element.bind('blur', function() {
        console.log('blur')
        scope.$apply(model.assign(scope, false));
      })
    }
  };
});

- Sudarshan Kalebere

Answer 2

怎么样：

<input ng-init="$element.focus()">

那对我来说起作用了。

- Ross Rogers

Answer 3

自动对焦功能可用。

<input type="text" name="fname" autofocus>

- tfa

---

它只在第一次运行时有效，如果我关闭弹出窗口并再次打开它，则无法正常工作。 - Sheesh Mohsin

你使用的是哪个版本？ - Sheesh Mohsin

我认为你的回答只针对输入类型文本编写，因为我可以看到在点击运行代码片段时，问题实际上要求在Bootstrap模态弹出窗口中自动对焦。 - Sheesh Mohsin

只需将自动对焦放在您想要聚焦的元素上，例如：<button autofocus class="btn btn-warning" type="button" ng-click="cancel()">取消</button> - tfa

同样适用于文本区域，每次打开uibmodal。 - Rakesh Gupta

Answer 4

现在已经在版本0.13.0中修复了此问题，请在此处查看错误报告：链接

- Pylinux