Angular Bootstrap 模态弹出自动对焦不起作用答案

【问题标题】：Angular Bootstrap Modal popup autofocus not workingAngular Bootstrap 模态弹出自动对焦不起作用
【发布时间】：2014-10-04 04:18:02
【问题描述】：

我已经实现了一个bootstrap modal using angular bootstrap，它工作正常。

这是我使用的代码的plunker link。

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

我尝试了 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 你看不到我的链接的焦点吗？我想我已经提供了你需要的工作演示。请发表您的看法。谢谢

标签： jquery angularjs twitter-bootstrap

【解决方案1】：

这是一个plunker link with the fix：你需要为它创建一个指令

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));
      })
    }
  };
});

【讨论】：

【解决方案2】：

怎么样：

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

这对我有用。

【讨论】：

【解决方案3】：

自动对焦有效

&lt;input type="text" name="fname" autofocus&gt;

【讨论】：

它只在第一次工作，如果我关闭弹出窗口并重新打开它就不起作用
确保您使用正确的 ui-bootstrap 版本。我刚刚检查了我的网站，即使我关闭并重新打开模式，它也会正确地将焦点设置在桌面或移动设备上的输入上。
你用的是哪个版本？
我使用的版本是0.13.4。
我认为您只为输入类型文本编写了答案，正如我在单击运行代码 sn-p 时看到的那样，问题实际上要求在引导模式弹出窗口中自动对焦

【解决方案4】：

现在是 fixed 版本 0.13.0，请在此处查看错误报告：link

【讨论】：