Question

我已经实现了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>

如何让它发挥作用？

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

Answer 2

怎么样：

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

这对我有用。

Answer 3

自动对焦

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

Answer 4

版本fixed现已0.13.0，请参阅此处的错误报告：link

Angular Bootstrap Modal弹出式自动对焦无法正常工作

4 个答案: