angularjs - 如何在弹出窗口中渲染 Angular 指令，并允许其与主窗口进行通信？

Question

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

我不想在弹出窗口中加载整个 SPA，只是为了显示这一个 View 。我发现我可以将模板附加到弹出窗口的主体中，并使用主窗口中的范围对其进行 $compile 。这在大多数情况下是有效的，但任何使用“require”语法的指令最终都会失败，因为无论 Angular 在哪里寻找所需的指令，它都找不到它。

是否有更好的方法来实现我想要实现的目标？

或者我可以尝试解决“找不到指令 Y 所需的 Controller 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 文件发送适当的缓存 header ，则用户无需下载这些文件。

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

另一种方法是创建第二个顶级模块，仅引入您需要的组件，但这同样需要您进行大量的额外工作，并且您的用户需要下载其他文件。