How can I render an Angular directive in a popup window, allow it to communicate with the main window?

问题

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.

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?

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

回答1:

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.

来源：https://stackoverflow.com/questions/39900361/how-can-i-render-an-angular-directive-in-a-popup-window-allow-it-to-communicate