如何在弹出窗口中呈现Angular指令，让它与主窗口通信?

Question

我的应用程序的用户希望能够从SPA分离某些应用程序组件，并将它们移动到第二个监视器，同时保留其功能。

我不想在弹出窗口中加载整个SPA只是为了显示这一个视图。我发现，我可以附加一个模板到弹出窗口的主体和$编译它那里使用的范围从主窗口。这基本上是有效的，但是任何使用了require语法的指令最终都会失败，因为无论Angular在哪里寻找所需的指令，它都找不到它。

有没有更好的方法来完成我想要达到的目标?

或者我可以尝试解决"无法找到指令Y所需的控制器X"问题的任何想法?

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文件发送合适的缓存头文件，用户就不需要下载这些文件了。

试图建立第二个子子站点，其中一些组件可以使用，这将是一个维护噩梦。

另一种选择是创建第二个顶层模块，只拉入你需要的组件，但这对你来说是大量的额外工作，你的用户将需要下载额外的文件。