twitter-bootstrap Angular Bootstrap Modal 弹出式自动对焦不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25241544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Bootstrap Modal popup autofocus not working
提问by Yasser Shaikh
I have implemented a bootstrap modal using angular bootstrapwhich works fine.
我已经使用 angular bootstrap实现了一个引导模式，它工作正常。
Here is a plunker linkfor the code I have used.
这是我使用的代码的plunker 链接。
In my modal I have only one input field (textbox) which needs to be filled by the user and a save and cancel button. I want that when the modal is shown the textbox should have the focus.
在我的模态中，我只有一个需要由用户填写的输入字段（文本框）以及一个保存和取消按钮。我希望当显示模态时，文本框应该具有焦点。
I tried the autofocusattribute which works otherwise not working in this case.
我尝试了有效的autofocus属性，否则在这种情况下不起作用。
Pasted below is my html on the modal.
下面粘贴的是我在模态上的 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>
How do I get this to work ?
我如何让这个工作？
回答by Sudarshan Kalebere
Here is a plunker link with the fix: you need to create a directive for it
这是一个带有修复程序的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));
})
}
};
});
回答by Ross Rogers
How about:
怎么样：
<input ng-init="$element.focus()">
That worked for me.
那对我有用。
回答by tfa
autofocus works
自动对焦有效
<input type="text" name="fname" autofocus>