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

JavaScript

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(); //←これは後述 
        }
    });
});