3

inputしたがって、 Ionic アプリケーションの現在のページの最初のフィールドをオートフォーカスする次の Angular ディレクティブがあります。最初のフィールドが隠されていなければ、うまく機能します。しかし、それが によって隠されている場合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 に答える