如何在弹出窗口中呈现 Angular 指令，使其与主窗口通信? [英] How can I render an Angular directive in a popup window, allow it to communicate with the main window?

问题描述

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

Users of my app want to be able to detach certain application components from the SPA and move them onto their second monitor while retaining their functionality.

我不想在弹出窗口中加载整个 SPA，只是为了显示这个视图.我发现我可以将模板附加到弹出窗口的正文中，并使用主窗口中的范围在那里对其进行 $compile.这主要是有效的，但任何使用require"语法的指令最终都会失败，因为 Angular 在任何地方寻找所需的指令，它都找不到.

What I don't want is to load the entire SPA in a popup window just to show this one view. I've found that I can append a template to a popup window's body and $compile it there using the scope from the main window. This mostly works, but any directive that uses the 'require' syntax will ultimately fail because where ever Angular is looking for the required directive it isn't finding it.

是否有更好的方法来完成我正在努力实现的目标?

Is there a better way of doing what I'm trying to achieve?

或者有什么想法可以尝试解决找不到指令 Y 所需的控制器 X"问题?

Or any ideas what I can try to solve the "Controller X required by directive Y can't be found" issue?

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();
    });
}

推荐答案

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

The correct way to handle this situatin it to load the app in the new window. This would be no different than someone doing a right-click open in new window. If you are sending appropriate cache headers for your JS and CSS files the use will not need to download the files.

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

Attempting to build a second sub-sub site where some components can be used is going to be a maintenance nightmare.

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

An alternative would be to create a second top level module that pulling in only the components you need but again this is a lot of ectra work on your end and your users would need to download additional files.

这篇关于如何在弹出窗口中呈现 Angular 指令，使其与主窗口通信?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！