AngularJS と従来のコード間の相互運用性を実現する方法

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 テクノロジーと既存のシステムの統合が容易になります。

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