web-dev-qa-db-ja.com

AngularJS DOMセレクター

アニメーション効果にjQueryを使用するカスタムディレクティブがいくつかあります（angularの組み込みngShow/ngHideなどは機能的ですが、きれいではありません）。私は代わりに使用すべきangularが独自のDOMセレクター（angular.export()またはangular.select()のようなもの）を持っているというドキュメントを読んだことを覚えていると思います。 $(SELECTOR);ただし、今は見つかりません。

私はこのようなことをしています：

_//view
<div scroll-to="element"> //`element` is set via ng-click
  …
</div>

//directive
link: function(scope, Elm, attrs)
{

  scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
  {
    if ( newValue !== oldValue )
    {
      Elm.animate({
        scrollTop:
          $('#'+newValue).offset().top //replace jquery selector with angular's
          - Elm.offset().top
          + Elm.scrollTop()
      });
    }
  });

}
_

$('#'+newValue)を実際に操作するのではなく、それに関する情報を取得するだけなので、Angularに対する犯罪を犯しているとは思わない。

javascriptjquery-selectorsangularjsangularjs-directive
35
jacob

"jqLit​​e"（ angular.element ページで定義）は、children()、parent()、contents()、find()、next()（ただし、previous()は除く）。セレクタのようなメソッドはありません。

JavaScriptの querySelector を試してください。

36
Mark Rajcok

AngularJsの公式ドキュメントによると

Angularのすべての要素参照は常にラップ withjQueryまたはjqLit​​e（ディレクティブのコンパイル/リンク関数の要素引数など）。生のDOM参照ではありません。

詳細：jQuerybefore your Angular reference、angular.element()関数はjQueryのエイリアスになります（それ以外はjqLiteです。MarkRajcokの答えを参照してください）。

angular.element()を呼び出す行にブレークポイントを置くことにより、jQueryまたはjqLit​​eを取得している場合は、開発ツールデバッガーでチェックインできます。ホバリングすると、関連するライブラリのプロンプトが表示されます。下のスクリーンショットを参照してください（私の場合、jQueryを取得します）。

jQuery for <code>angular.element()</code>

AngularJsの公式ドキュメントによると

タグ名による検索の場合は、代わりにangular.element(document).find(...)または$document.find()を試してください

言い換えると、angular.element()を呼び出すときにjQueryを取得した場合、angular.element('#foo > bar')のようなものは、それがあなたが考えているものであれば機能します。

JQueryを使用せずにこのセレクター機能を取得する方法を知りたい場合は、 Sizzlejs を使用できます。 SizzleはjQueryが内部で使用するセレクターライブラリです 。

38
Ben Lesh