AngularJS とレガシー コード間の相互運用

AngularJS がレガシー アプリケーションと統合されているシナリオでは、二。課題の 1 つは、レガシー アプリからのコールバックを DOM ウィンドウにアタッチする必要があるという要件です。この記事では、この問題に対処し、AngularJS とレガシー コード間の効果的な対話を促進する方法について説明します。

レガシー コールバックを有効にするには、AngularJS が呼び出せるウィンドウ オブジェクトに関数を登録します。たとえば、AS3 では:

ExternalInterface.call("save", data);

これにより、AngularJS で次の関数が呼び出されます:

window.save = function(data){
    // Update a service or dispatch an event
}

AngularJS コントローラーがリッスンできるイベントをレガシー アプリケーションからディスパッチするには、サービスを使用することをお勧めします。ただし、AngularJS の外部からサービスを変更する場合は特別な注意が必要です。

解決策は、AngularJS の相互運用機能を活用することです。 DOM 要素のスコープまたはインジェクターにアクセスすることで、AngularJS アプリケーションと対話できます。例:

angular.element(domElement).scope().$apply(function(){
  // Update angular model or invoke methods
});

要約すると、AngularJS と従来のコード間の相互運用を有効にするには、ウィンドウ オブジェクトにコールバックを登録し、イベントのディスパッチを容易にするサービスを使用し、AngularJS の外部からスコープとインジェクターにアクセスするために AngularJS の相互運用メカニズムを利用することが含まれます。このアプローチにより、2 つのアプリケーション間のシームレスな通信が可能になり、最新の Web テクノロジーと既存のシステムの統合が容易になります。