AngularJS とレガシーコードを相互運用する方法

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

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

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

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

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

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

制限事項

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

例

以下コード スニペットは、AngularJS でサービスを設定し、従来の AS3 アプリケーションからアクセスする方法を示しています:

<code class="javascript">angular.module('myApp').service('myService', function () {
  this.data = [];

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

<code class="as3">// in legacy AS3 code
ExternalInterface.call("myService.setData", data);</code>

AngularJS コントローラー内:

<code class="javascript">$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});</code>

以上がAngularJS とレガシーコードを相互運用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。