AngularJS - 使用ng输入自动对焦 - 如果不工作答案

【问题标题】：AngularJS - input autofocus with ng-if not workingAngularJS - 使用ng输入自动对焦 - 如果不工作
【发布时间】：2016-07-15 13:41:37
【问题描述】：

当我用ng-if 包围我的input 时，隐藏并显示autofocus 属性后不会生效：

代码如下：

  <!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 中根本不起作用！

【问题讨论】：

标签： javascript angularjs input autofocus angular-ng-if

【解决方案1】：

问题是属性autofocus 不是 Angular 指令。这是一个browser supported specification of the <input> element。如果您希望它在多个浏览器中按预期工作并在每次单击隐藏/显示时自动聚焦，则需要制定指令。

我直接从 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="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>

【讨论】：

我想在您的解决方案中添加一件事 - 指令前缀。就像在 directive(...) 中注册为 abcAutofocus 一样，在 HTML 模板中使用 abc-autofocus 以避免混淆使用哪种解决方案 - 纯 HTML 或 Angular 指令。
Greaaaaaat 解决方案。谢谢
另一种选择是在单击按钮或收到响应后手动调用angular.element('[autofocus]').trigger('focus');

【解决方案2】：

您可以为此使用指令。 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(); } );
            }
        }
    };
});

您也可以在其中的focus-me-if 属性中定义一个条件。

希望对你有帮助。

【讨论】：

【解决方案3】：

首先，您必须将 div 及其内容包装在 body 元素中。你有它在外面。请改正。

输入元素不能为空，有时可能不起作用。请添加更多属性，例如 name 和 type="text" 或适当的。这是 html5 功能，应以 开头。

请注意：The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.visit here for more details

【讨论】：

修复了demo，不是这个问题，在IE11上测试过。你可以测试一下。它不工作