Site icon Tips Note by TAM

AngularJSで定義した関数を、jQueryから呼ぶ方法

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形式のデータから、日本の祝日リストを自動生成する