Angularディレクティブをポップアップウィンドウでレンダリングし、メインウィンドウと通信できるようにするにはどうすればよいですか？

Question

私のアプリのユーザーは、特定のアプリケーションコンポーネントをSPAから切り離して、機能を維持したまま2番目のモニタに移動したいと考えています。

私が望ましくないことは、この1つのビューを表示するためだけにポップアップウィンドウにSPA全体をロードすることです。私は、ポップアップウィンドウの本体にテンプレートを追加し、メインウィンドウのスコープを使用してテンプレートを$コンパイルできることを発見しました。これは主に動作しますが、 'require'構文を使用するディレクティブは最終的には失敗します。

私が達成しようとしていることを実行する良い方法はありますか？

私は "コントローラーXの指示Yで必要な問題を解決できません"問題を見つけることができますか？

function createWindowForPoppedOutPane(pane) { 
    var features = 'menubar=no'; 
    if (pane.top) features += ',top=' + pane.top; 
    if (pane.left) features += ',left=' + pane.left; 
    if (pane.width) features += ',width=' + pane.width; 
    if (pane.top) features += ',height=' + pane.height; 

    pane.window = $window.open('', '_blank', features); 
    copyStyleSheetsToWindow(pane.window); 
    var paneScope = scope.$new(false); 
    paneScope.pane = pane; 

    var paneTemplate = $($templateCache.get('pop-out-pane-template')); 
    paneTemplate.append($templateCache.get(pane.template)); 

    scope.$evalAsync(function() { 
     pane.window.document.title = pane.title; 
     angular.element(pane.window.document.body).append(paneTemplate); 
     $compile(paneTemplate)(paneScope); 
     startPoppedOutPaneWatcher(); 
    }); 
} 

Answer 1

これを処理する正しい方法は、新しいウィンドウでアプリケーションを読み込むためのものです。これは、新しいウィンドウで右クリックをしている人と変わらないでしょう。 JSファイルとCSSファイルに適切なキャッシュヘッダーを送信する場合は、ファイルをダウンロードする必要はありません。

いくつかのコンポーネントを使用できる2番目のサブサブサイトを構築しようとすると、メンテナンスの悪夢となります。

もう1つの方法は、必要なコンポーネントだけを取り込む2番目のトップレベルモジュールを作成することですが、もう一度これを行うと多くの作業が終わり、ユーザーは追加ファイルをダウンロードする必要があります。