AngularJS TIPS
AngularJSアプリでjQueryを利用するには？（element／ng-jq）
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
別稿「TIPS：AngularJSで文書ツリーを操作するには？」でも触れたように、AngularJSではjQueryの軽量互換ライブラリであるjqLiteを標準で備えており、jQueryとほぼ同じ要領で、簡易な文書ツリーの操作を賄えます*1。
- *1 ただし、安易に文書ツリーの操作に走るべきでないことは、別稿でも述べた通りです。
ただし、jqLiteで対応しているメソッドは、別稿でも見たように、要素や属性周りのそれに限定されています。jqLiteオブジェクトが備えていないメソッドも利用したい――そのような場合には、そもそもjqLiteをjQueryで置き換えてみましょう。
これには、AngularJSをインポートする前に、jQueryをインポートするだけです。例えば以下は、jqLiteでは対応していないfadeOutメソッドを呼び出し、<img class="old">要素をフェードアウトします。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<img src="http://www.web-deli.com/image/linkbanner_s.gif" alt="WebDeli" class="old"/>
<img src="http://www.web-deli.com/image/wings_logo.gif" alt="wings" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
angular.element(document.getElementsByClassName('old')).fadeOut(3000);
</script>
</body>
</html>
|
確かに対象の要素がフェードアウトし、（jqLiteではなく）jQueryが有効になっていることが確認できます。
jqLite／jQueryを併用する
ページの中でjQueryプラグインを利用しているなどの状況で、jQueryをインポートせざるを得ないが、アプリの中ではjqLiteを利用したい（＝angular.elementメソッドの戻り値をjqLiteオブジェクトで固定したい）というケースもあります。
これには、ng-appディレクティブを付与した要素に対して、ng-jqディレクティブを付与するだけです。試しに、先ほどのコードに対して、ng-jqディレクティブを付与してみます。すると、jQueryをインポートしているにもかかわらず、angular.elementメソッドの戻り値がjqLiteオブジェクトとなりますので、fadeOutメソッドの呼び出しもエラーとなることが確認できます。
|
<!DOCTYPE html>
<html ng-app ng-jq>
……中略……
</html>
|
jQueryのバージョンを固定する
さらに複雑な例として、ページ内で複数のjQueryのバージョンを利用している場合があります。例えばアプリとしてはjQuery 2を利用したいが、特定のプラグインでjQuery 1.7以前のバージョンを要求している、というようなケースです。
そのような場合には、ng-jqディレクティブにjQueryの別名を宣言することで、利用するjQueryを明示することも可能です。以下に具体的な例を見てみます。
|
<!DOCTYPE html>
<!--2AngularJSアプリで利用するjQueryを固定-->
<html ng-app ng-jq="jq2">
……中略……
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 1jQuery 2.1.4に別名jq2を付与
var jq2 = jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
|
jQueryにアクセスするための別名は、jQuery.noConflictメソッドで宣言できます。noConflictメソッドは、もう片方のjQuery（ここではjQuery 1.6）を読み込む前に呼び出します。1ではjQuery 2に対して、jq2という別名を付与しています。あとは、この名前をng-jqディレクティブで指定するだけです（2）。これでAngularJSアプリではjQuery 2を、他のライブラリではjQuery 1.6を利用することになります。
API：angular.element カテゴリ：ng（コアモジュール） > function（関数）
API：ngJq（ng-jq）｜ngApp（ng-app） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第42回～第46回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
42. アプリ共通の例外処理を実装するには？（$exceptionHandler）
アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。
43. AngularJSで文書ツリーを操作するには？（element）
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
44. 【現在、表示中】≫ AngularJSアプリでjQueryを利用するには？（element／ng-jq）
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
46. パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
