Question

所以，我有以下Angular指令在我的Ionic应用程序的当前页面上自动聚焦第一个input字段。当第一个字段未隐藏时，它工作得很好。但是，如果它被ng-hide隐藏，则逻辑失败。因此需要修改元素选择器以仅查找指令中的可见元素。

angular.module('myApp').directive('focusMe', function($timeout) {
    return {
        link: function(scope, element, attrs) {
            $timeout(function() {
                element.find('label')[0].focus(); 
            }, 150);
        }
    };
});

在form元素上使用above指令，如下所示，

<form name="signinForm" ng-submit="signinForm.$valid && doSignin(credentials)" novalidate focus-me>

那么我应该如何更改我的jQLite查找查询以查找可见元素？根据文档，查找查找受标记名称的限制。

Answer 1

你可以这样写：

element[0].querySelector('input:not(.ng-hide)').focus();

jQLite仅允许按标签名称进行选择。因此，我们可以使用纯Javascript版本，即querySelector，同时使用:not选择器。

请参阅下面的工作示例：

angular.module('myApp', [])
  .directive('focusMe', function($timeout) {
    return {
      link: function(scope, element, attrs) {
        $timeout(function() {
          element[0].querySelector('input:not(.ng-hide)').focus();
        }, 150);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form focus-me ng-app="myApp">

  <input type="text" name="firstName" ng-show="false" />
  <input type="text" name="lastName" ng-show="true" />
  <input type="text" name="email" />

</form>

你如何在AngularJS下找到jqlite的第一个可见元素？

1 个答案: