AngularJS - 使用ng-输入自动对焦，如果不起作用
[英]AngularJS - input autofocus with ng-if not working
问题描述
When I surround my input with ng-if , after hide and show the autofocus attribute does not take effect: 
当我使用ng-if包围我的input ng-if ，在隐藏和显示后， autofocus属性不会生效：
Here is the code: 这是代码：
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-init="view={}; view.show = true">
<button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
<div ng-if="view.show">
<input autofocus />
</div>
</body>
</html>
And here is the plunker: http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview 以下是plunker： http ：//plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview
Just click on hide and after that on show and you will see the autofocus does not working! 只需单击隐藏，然后在显示后，您将看到自动对焦不起作用！
In Chrome is working only on the first show, in FF and IE it's not working at all! 在Chrome中只在第一个节目上工作，在FF和IE中它根本不起作用！
3 个解决方案
解决方案1
16 已采纳 2016-03-28 10:13:05
The problem is the attribute autofocus isnt an Angular directive. 问题是属性autofocus不是Angular指令。 It is a browser supported specification of the <input> element . 它是浏览器支持的<input>元素规范 。 If you want this to work as intended across multiple browsers and auto focus every time you click hide/show you will need to make a directive. 如果您希望它在多个浏览器中按预期工作并且每次单击隐藏/显示时自动聚焦，您将需要制定指令。
I took this directive right off Github Gist , credit to mlynch for building this directive. 我从Github Gist那里接过了这个指令，归功于mlynch建立这个指令。
Heres a working example of your application 下面是您的应用程序的一个工作示例
angular .module('App', [ 'utils.autofocus', ]); /** * the HTML5 autofocus property can be finicky when it comes to dynamically loaded * templates and such with AngularJS. Use this simple directive to * tame this beast once and for all. * * Usage: * <input type="text" autofocus> * * License: MIT */ angular.module('utils.autofocus', []) .directive('autofocus', ['$timeout', function($timeout) { return { restrict: 'A', link : function($scope, $element) { $timeout(function() { $element[0].focus(); }); } } }]);
<!DOCTYPE html> <html ng-app="App"> <head ng-init="view={}; view.show = true"> <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button> </body> <div ng-if="view.show"> <input autofocus /> </div> <script src="script.js"></script> </html>
解决方案2
3 2016-03-28 10:10:47
You can use a directive for this. 您可以使用指令。 Plunker Demo Plunker演示
angular.module('myApp', []).directive('focusMe', function($timeout) {
return {
scope: {
focusMeIf:"="
},
link: function ( scope, element, attrs ) {
if (scope.focusMeIf===undefined || scope.focusMeIf) {
$timeout( function () { element[0].focus(); } );
}
}
};
});
You could also define a condition in it in focus-me-if attribute in it. 您还可以在其中的focus-me-if属性中定义条件。
Hope it helps. 希望能帮助到你。
解决方案3
-1 2016-03-28 10:09:48
First of all you have to wrap the div and it's content inside the body element. 首先，你必须将div和它的内容包装在body元素中。 You have it outside. 你在外面。 please correct it. 请纠正它。
Input element should not be blank and may not work sometimes. 输入元素不应为空白，有时可能无效。 please add some more attribute like name and type="text" or appropriate. 请添加更多属性，如name和type =“text”或相应的。 This is html5 feature and should start with <!DOCTYPE html> . 这是html5功能，应该以<！DOCTYPE html>开头。
Please Note : The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions. 请注意： The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions. visit here for more details 访问这里了解更多详情
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.