【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.elementはjQueryのラッパーとして働きます。
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値を返戻する。