AngularJS - вход автофокуса с ng-если не работает
Когда я окружаю мой input
с помощью ng-if
, после скрытия и отображения атрибута autofocus
не вступает в силу:
Вот код:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="[email protected]" 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>
И вот плукер:
http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview
Просто нажмите на кнопку hide и после этого на шоу, и вы увидите, что автофокусировка не работает!
В Chrome работает только на первом шоу, в FF и IE он вообще не работает!
Ответы
Ответ 1
Проблема заключается в атрибуте autofocus
is not a Angular. Это поддерживаемая браузером спецификация элемента <input>
. Если вы хотите, чтобы это работало в соответствии с несколькими браузерами и автоматически фокусировалось каждый раз, когда вы нажимаете hide/show, вам нужно будет сделать директиву.
Я принял эту директиву сразу Github Gist, кредит mlynch для создания этой директивы.
Вот рабочий пример вашего приложения
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="[email protected]" 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
Вы можете использовать для этого директиву. Демо-версия плунжера
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(); } );
}
}
};
});
Вы также можете определить в нем условие в атрибуте focus-me-if
.
Надеюсь, что это поможет.
Ответ 3
Прежде всего, вы должны обернуть div и его содержимое внутри элемента body. У вас есть это снаружи. исправьте его.
Элемент ввода не должен быть пустым и может не работать. добавьте еще несколько атрибутов, например name и type = "text" .
Это функция html5 и должна начинаться с <! DOCTYPE html > .
Обратите внимание: The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.
посетите здесь для более подробной информации