jQueryとAngularJSを一緒に使う
私が前回、前々回と『jQuery ui Datepicker』のことを今更ながら記事にしましたが
その延長線上で、この話題に繋がりました。
「jQueryの便利なプラグインを使いつつ、AngularJS側で定義した関数呼びたいな…」
AngularJS側で定義した関数とは？
AngularJS側で定義した関数とは、
この記事では『$scope.関数名』で定義した関数のことを指します。
このように ↓
$scope.関数名 = function() {
<!-- 実行したい処理 -->
};
この$scope.関数名は、AngularJSの機能を利用する時に使用する関数のひとつです。
ng-appの宣言や、ng-controllerの指定をテンプレート側に記載し、
ng-controllerなどで使用する関数として$scope.関数名を定義します。
（今回のお話は、version 1系を対象としております。）
この関数をjQuery側から呼び出すには…
今回はDatepickerを例として、コールバック関数から呼び出してみます。
本題
AngularJSの関数を呼び出すポイントは次の2点です。
・angular.element()を使用して、$scopeを呼び出す。
・$apply()を使用する
まずViewでng-controllerを記述している要素に、id要素を付与します。（classでもOK）
<body id="myCtrl" ng-controller="myCtrl">
そして、例えばdatepickerでは、
option設定部分に『onSelect』、『onChangeMonthYear』などの
コールバックを設定できるオプションがあります。
ここに$scopeを利用する記述を以下のように書くすることで、jQuery併用できるようになります。
（もちろんプラグインを絡める必要性はなく、直接関数を呼ぶことも可能です。）
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
angular.element('#myCtrl').scope().関数名();
angular.element('#myCtrl').scope().$apply(); //←これは後述
}
});
});
$apply()で、AngularJSにお知らせする
AngularJSではAngularJSの機能を利用した場合、
変更を検知する機能も存在しているので変更内容を検知できます。
jQueryの関数を利用する場合は、その変更を検知する機能が発動しません。
例えば、AngularJSの関数である$timeoutを利用すると変更結果を検知できますが、
AngularJSの関数ではないsettimeout()を利用すると変更結果を検知できません。
そこで、$qpplyを利用すると、変更結果を検知させることができます。
この場合も、$apply()を利用して、変更結果を検知させてあげる必要があります。
終わりに
いかがでしたでしょうか。
単純なDOM操作としては、
angular.element('#要素id'や、'.要素class').scope().ng-model名
などで操作可能できることは経験していたのですが、関数まで呼びだせるとは…
まだまだ勉強です。
・AngularJS 公式リファレンス
angular.element
・Datepickerについて 過去記事（前回、前々回）
jQuery ui Datepickerに祝日を反映する
Google Calender iCal形式のデータから、日本の祝日リストを自動生成する