3

因此，我有以下 Angular 指令来自动聚焦inputIonic 应用程序当前页面上的第一个字段。当第一个字段没有隐藏时，它的效果很好。但是，如果它被 隐藏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 查找查询以仅查找可见元素？根据文档，查找查找受标签名称的限制。

4

1 回答 1

2

你可以这样写：

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>

于 2015-12-12T08:08:58.153 回答