Как вы видите первый видимый элемент с jqlite под AngularJS?

Question

Итак, у меня есть следующая угловая директива для автофокусировки сначала input на текущей странице моего приложения Ionic. Он отлично работает, когда первое поле не скрыто. Но, если он скрыт 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>