[解決済み] レガシーコードから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.
});
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] AngularJS 。非同期データでサービスを初期化する
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueにシンプルなメモ帳機能を実装
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] AngularJSのサービスをコンソールからテストするにはどうしたらいいですか?
-
[解決済み] AngularJSのjs関数外からのアクセススコープ