1. ホーム
  2. javascript

[解決済み] レガシーコードからAngularJSを呼び出す

2022-04-20 21:19:28

質問

AngularJSを使って、レガシーなFlexアプリケーションとやり取りするHTMLコントロールを構築しています。Flexアプリケーションからのすべてのコールバックは、DOMウィンドウにアタッチする必要があります。

例えば(AS3の場合)

ExternalInterface.call("save", data);

コールする

window.save = function(data){
    // want to update a service 
    // or dispatch an event here...
}

JSのリサイズ機能から、コントローラーが聞けるようなイベントを発信したいと思います。サービスを作るのがよさそうです。AngularJSの外からサービスを更新することは可能ですか?コントローラは、サービスからのイベントを聞くことができるのでしょうか?ある 実験 (クリックでフィドル) サービスにアクセスすることはできるようですが、サービスのデータを更新してもビューに反映されないようです(例では <option> を追加する必要があります。 <select> ).

ありがとうございます。

解決方法は?

angularの外部からangularへの相互運用は、angularアプリケーションのデバッグやサードパーティライブラリとの統合と同じです。

どのようなDOM要素に対しても、これを行うことができます。

  • angular.element(domElement).scope() を使用して、要素の現在のスコープを取得します。
  • angular.element(domElement).injector() 現在のアプリインジェクタを取得します。
  • angular.element(domElement).controller() を取得します。 ng-controller のインスタンスを作成します。

インジェクターから、angularアプリケーションのあらゆるサービスを取得することができます。同様に、スコープから、そのスコープに公開されている任意のメソッドを呼び出すことができます。

Angularモデルの変更やスコープでのメソッド呼び出しは、すべて $apply() このように

$scope.$apply(function(){
  // perform any model changes or method invocations here on angular app.
});