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. посетите здесь для более подробной информации