AngularJS-автофокус ввода с ng-если не работает

когда я окружаю мой input С ng-if, после того, как скрыть и показать не работает:

вот код:

  <!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>

и вот plunker: http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview

просто нажмите на скрыть и после этого на шоу, и вы увидите, что автофокус не работает!

на Chrome работает только на первом шоу, в FF и IE это не работает вообще!

12
angular-ng-if angularjs autofocus input javascript

3 ответов

проблема-это атрибут autofocus не угловой директивы. Это браузер поддерживает спецификацию <input> элемент. Если вы хотите, чтобы это работало по назначению в нескольких браузерах и автофокусе каждый раз, когда вы нажимаете Скрыть/показать, вам нужно будет сделать директиву.

я сразу взял эту директиву Github Gist, кредит mlynch для построения настоящей директивы.

Heres рабочий пример вашего применение

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>
16

для этого можно использовать директиву. 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(); } );
            }
        }
    };
});

вы также можете определить условие в нем в в нем.

надеюсь, что это помогает.

3

прежде всего, вам нужно обернуть div, и это содержимое внутри элемента body. Она у вас снаружи. пожалуйста, исправьте это.

элемент ввода не должен быть пустым и иногда может не работать. добавьте еще один атрибут, например имя и type= "text" или уместно. Это функция html5 и должна начинаться с .

Обратите Внимание : The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.посетите здесь для получения более подробной информации

-1