如何在弹出窗口中呈现 Angular 指令，允许它与主窗口通信？答案

【问题标题】：How can I render an Angular directive in a popup window, allow it to communicate with the main window?如何在弹出窗口中呈现 Angular 指令，允许它与主窗口通信？
【发布时间】：2016-10-07 01:16:18
【问题描述】：

我的应用程序的用户希望能够从 SPA 中分离某些应用程序组件并将它们移动到他们的第二台显示器上，同时保留它们的功能。

我不想在一个弹出窗口中加载整个 SPA，只是为了显示这个视图。我发现我可以将模板附加到弹出窗口的主体并使用主窗口中的范围对其进行 $compile。这主要是可行的，但是任何使用 '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();
    });
}

【问题讨论】：

您能分享一些您目前编写的代码，以便我们看看吗？
当然可以。不过，这并不多。
在新窗口中加载整个应用程序有什么缺点？他们期待窗口实时更新吗？
两者之间的实时通信，是的。加载整个应用程序的缺点是应用程序很大而且加载速度很慢。

标签： angularjs angularjs-directive

【解决方案1】：

处理这种情况的正确方法是在新窗口中加载应用程序。这与在新窗口中右键单击打开没有什么不同。如果您为您的 JS 和 CSS 文件发送适当的缓存标头，则无需下载这些文件。

尝试构建第二个子站点以供使用某些组件将是一场维护噩梦。

另一种方法是创建第二个顶级模块，仅提取您需要的组件，但这又是您的大量工作，您的用户需要下载其他文件。

【讨论】：