35

アニメーション効果に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に対して犯罪を犯しているとは思いません。

4

2 に答える 2

39

公式のAngularJsドキュメントが言うように

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

詳細： Angular参照の前にjQuery を含めると、関数はjQueryのエイリアスになります（そうでない場合は、Mark Rajcokの回答を参照してください）。angular.element()jqLite

を呼び出す行にブレークポイントを設定することで、jQueryまたはjqLit​​eを取得しているかどうかをDevToolデバッガーで確認できますangular.element()。ホバーすると、関連するライブラリの入力を求められます。下のスクリーンショットを参照してください（私の場合、jQueryを取得します）。

<code> angle.element（）</code>のjQuery

公式のAngularJsドキュメントが言うように

タグ名によるルックアップの場合は、代わりにangular.element(document).find(...)または$document.find()

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

jQueryを使用せずにこのセレクター機能を取得する方法がわからない場合は、Sizzlejsを使用することをお勧めします。Sizzleは、jQueryが内部で使用するセレクターライブラリです。

于 2013-03-07T20:12:14.010 に答える
36

「jqLit​​e」( angular.elementchildren()ページで定義) は、parent()、contents()、 、find()などのDOM トラバーサル メソッドを提供しますnext()(ただし、 ではありませんprevious())。セレクターのようなメソッドはありません。

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

于 2013-03-07T20:02:11.537 に答える