AngularJS – autofocus d'entrée avec ng-si ne fonctionne pas

Lorsque j'entoure mon input avec ng-if , après cacher et afficher, l'attribut autofocus ne prend pas effet:

Voici le 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>

Et voici le plunker: http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview

Cliquez simplement sur cacher et après cela, et vous verrez que l'autofocus ne fonctionne pas!

Chrome ne fonctionne que sur le premier spectacle, dans FF et IE, il ne fonctionne pas du tout!

Le problème est que l'attribut autofocus n'est pas une directive angulaire. C'est une spécification supportée par le navigateur de l'élément <input> . Si vous voulez que cela fonctionne comme prévu sur plusieurs navigateurs et la mise au point automatique chaque fois que vous cliquez sur cacher / montrer, vous devrez créer une directive.

J'ai pris cette directive directement de Github Gist , crédit à mlynch pour la construction de cette directive.

Voici un exemple de votre 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="[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>

Vous pouvez utiliser une directive pour cela. Plunker Demo

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

Vous pouvez également définir une condition dans l'attribut focus-me-if dans celui-ci.

J'espère que cela aide.

Tout d'abord, vous devez envelopper le div et c'est contenu dans l'élément du corps. Vous l'avez à l'extérieur. Corrigez-le.

L'élément d'entrée ne doit pas être vide et peut ne pas fonctionner parfois. Ajoutez un autre attribut comme nom et type = "texte" ou approprié. Cette fonction est html5 et devrait commencer par <! DOCTYPE html> .

Remarque: l' The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions. Visitez ici pour plus de détails