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

Question

因此，我在 Ionic 应用程序的当前页面上有以下 Angular 指令来自动聚焦 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 元素上使用上述指令，如下所示，

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