AngularJSからjQueryを呼び出すための汎用ライブラリ

AngularJSは便利ですが、jQueryが過去に蓄積してきた膨大なライブラリがそのまま使えないという欠点があります。もちろん、ラッパーとなるAngularJSモジュールがあれば良いわけですが、存在しなかったり、すべての機能がサポートされているわけじゃなかったりして自作したり、既存ライブラリに手を入れないといけないことが多々あります。

ただ、毎回似たようなコードを書くのが面倒だし、いちいち仕様を考えたり、覚えたりするのも面倒です。そこで、Angular jQuery Wrapperという、汎用的なWrapperを書きました。

javascriptオブジェクトとして、スキーマを与えてやると自動的にAngularJSのディレクティブを生成してくれるというDDD（ドメイン駆動開発）の変形のような設計になっています。このため、任意のjQueryプラグインが使えるわけではなく、サポートしているプラグインのみですが、簡単に他のプラグインも追加できる仕様になっています。

今のところ使えるのは、jQuery UIの全ウィジェットと、jQuery MultiDatePickerだけです。今後は、bootstrap系のプラグインなどを追加していきたいと思っています。

GitHub:
https://github.com/norami/angular-jquery-wrapper
Demo:
http://norami.github.io/angular-jquery-wrapper/
Bower:
bower install angular-jquery-wrapper

使用方法

インストール

bower install angular-jquery-wrapper

ヘッダ

こんな感じ。通常は必要なプラグインだけを読み込みます。

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="lib/multidatespickr/jquery-ui.multidatespicker.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-jquery-wrapper/dist/angular-jquery-wrapper-core.js"></script>
<script src="bower_components/angular-jquery-wrapper/dist/multidatespicker.js"></script>
<script src="bower_components/angular-jquery-wrapper/dist/jquery-ui.js"></script>

ディレクティブ

jqw-{plugin_name}

そのプラグインの使用を宣言します

jqw-{plugin_name}-{option-name}="{angular_expression}"

angular式をオプションにバインドします。可変なオプションについては双方向バインディングになります。

setter: $(selector).{plugin-name}("option", "{OptionName}", value);
getter: $(selector).{plugin-name}("option", "{OptionName}");

jqw-{plugin_name}-{field-name}="{angular_expression}"

angular式を以下のフィールドにバインドします。可変なフィールドについては双方向バインディングになります。

setter: $(selector).{plugin_name}("set{FieldName}", value);
getter: $(selector).{plugin_name}("get{FieldName}");

例1：jqw-datepicker-dateは、datepickerでpickされる値をDateオブジェクトとしてバインドします。

例2: jqw-multidatespicker-listは、選択可能な値のリストを、Dateオブジェクトの配列としてバインドします（この機能は、標準のjQuery multiDatePickerには存在しない）

jqw-{plugin_name}-{event_name}="{angular_expression}"

angular式をイベントにバインドします。angular式は呼び出し可能な関数でなければいけません

$(selector).on("{plugin_name}{event_name}", function(event, ui){
    {angular_expression}(event, ui);
})

利用している技術

AngularJSで、属性として与えられた任意のAngular式を双方向バインドする