AngularJS とレガシー コードのインターフェイス

AngularJS とレガシー アプリケーションの統合では、Angular フレームワークと対話する必要がある外部コールバックにより課題が発生する可能性があります。これに対処するために、AngularJS は相互運用性のためのいくつかのメカニズムを提供します。

外部コードから Angular サービスにアクセスする

1 つのアプローチは、AngularJS サービスを作成し、そのサービスを更新するセッター メソッドを公開することです。データ。レガシー コードは、AngularJS の ExternalInterface オブジェクトを通じてこれらのメソッドを呼び出すことができます。サービス内では、setter 関数は Angular イベント バスを使用してイベントをトリガーする必要があります。

コントローラーのサービスからイベントをキャプチャする

コントローラーはサービスによって発行されたイベントをサブスクライブできます。これを行うには、まずサービスでイベント名を定義します。コントローラーで $scope.$on() メソッドを使用して、関連する名前のイベントをキャッチし、必要な UI 更新を実行するイベント リスナーを登録します。

制限事項

AngularJS の外部からサービスのデータを直接更新しても、ビュー内の更新が常にトリガーされるわけではないことに注意することが重要です。これは、AngularJS が一方向のデータ バインディング メカニズムを使用しているためです。更新がビューに確実に反映されるようにするには、スコープ上のデータ変更またはメソッド呼び出しを AngularJS の $apply() 関数でラップする必要があります。

例

次のとおりです。コード スニペットは、AngularJS でサービスをセットアップし、従来の AS3 アプリケーションからアクセスする方法を示しています。

angular.module('myApp').service('myService', function () {
  this.data = [];

  this.setData = function (data) {
    this.data.push(data);
    this.$emit('dataUpdated', data);
  };
});

// in legacy AS3 code
ExternalInterface.call("myService.setData", data);

AngularJS コントローラー内:

$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});