AngularJS

Question

当我用 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

只需点击隐藏然后显示，您就会发现自动对焦不起作用！

In Chrome 仅在第一个节目中工作，在 FF 和 IE 它根本不起作用！

Answer 1

首先，您必须将 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

Answer 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 属性中定义条件。

希望对您有所帮助。

Answer 3

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

为了构建此指令，我立即使用此指令 Github Gist, credit to 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>

AngularJS - 使用 ng-if 不工作时输入自动对焦

AngularJS - input autofocus with ng-if not working

javascript

input

autofocus

angular-ng-if