Works by

Works by

プログラミング等IT技術関連でメモする

【AngularJS】AngularJSの組み込みjQuery "jqLite" を使う

jqLiteとは

jqLiteはAngularJSに組み込みで実装されている軽量版JQueryです。
JQueryのようにDOM要素やHTML文字列を操作することができます。

使い方

angular.element()を使うと、JQuery$()のように働きます。

// id指定
angular.element('#element_id');
// クラス名指定
angular.element(document.getElementsByClassName('.class_name')[0]);

angular.elementjQueryのラッパーとして働きます。
jQueryが使える環境下であればそのままjQueryを呼び出し、
使用できない環境であればjQliteが呼ばれる仕組みになっています。

jQueryを呼び出したい場合は通常のjQueryを読み込んで使用するか、
ngJqディレクティブを使用することでjqliteをjQuery経由で使用することができます。

使用可能な関数

jQliteは軽量なjQueryなので、使用できる関数に制限があります。
また、AngularJSのバージョンによっても使用可能な関数が変わってきます。

  • addClass()
  • after()
  • append()
  • attr()
  • bind() -> 非推奨。代わりにon()を推奨
  • children()
  • clone()
  • contents()
  • css()
  • data()
  • detach()
  • empty()
  • eq()
  • find()
  • hasClass()
  • html()
  • next()
  • on()
  • off()
  • one()
  • parent()
  • prepend()
  • prop()
  • ready()
  • remove()
  • removeAttr()
  • removeClass()
  • removeData()
  • replaceWith()
  • text()
  • toggleClass()
  • triggerHandler()
  • unbind() -> 非推奨。代わりにoff()を推奨
  • val()
  • wrap()

angular.element()が呼べるメソッド

angular.element()が返戻するオブジェクトには、上記で紹介したメソッドに加え、$()が返すオブジェクトでは呼べないメソッドも実装されています。

controller(directiveName)

指定した要素、またはその親要素に紐付けたControllerオブジェクトを取得します。
引数を与えなかった場合、ngControllerディレクティブによって紐付けたControllerオブジェクトが返戻されます。
引数をキャメルケースのディレクティブとして与えた場合、指定したディレクティブのControllerが取得できます。

injector()

要素のInjectorを取得します。

scope()

指定した要素、またはその親要素のscopeオブジェクトを取得します。

isolateScope()

指定した要素に紐付けたscopeオブジェクトを取得します。

inheritedData(key)

指定したキー値keyに一致する属性を親要素を辿りつつ探索し、マッチした場合にそのvalue値を返戻する。