AngularJS（1.5）将面板分离到子窗口，反之亦然答案

【问题标题】：AngularJS (1.5) detach panel to child window and vice versaAngularJS（1.5）将面板分离到子窗口，反之亦然
【发布时间】：2017-10-15 00:28:35
【问题描述】：

我有一个子控制器，我可以在一些主控制器中使用它。例如，它是主页面控制器内的一个面板。现在我需要打开一个带有这个子控制器的子窗口。 我该怎么做？

例如，我有一个视频播放器面板，我希望它可拆卸并可缩放。

我的子控制器有自己的模板文件，我将它注入到主控制器中：

...
<div class="col-sm-6 col-md-6">
    <span ng-include="AVTemplateUrl" ng-controller="VideoCtrl as AV" data-ng-init="AV.init()"></span>
</div>
...

和孩子的构造器：

angular.module('myApp.video', ['ngRoute'])
.controller('VideoCtrl', ['$scope', ...],
    function ($scope, ...) {
        $scope.AVTemplateUrl = 'view/device/video.html';
        let AV = $scope.AV = { ... }
...

附：对不起我的英语。

【问题讨论】：

这个是angular还是angularjs相关？
@jota-toledo，我是"dependencies": { "angular": "^1.5.7"...

标签： angularjs

【解决方案1】：

在https://stackoverflow.com/a/17066146/2982280 和http://embed.plnkr.co/dz1A1h/ 找到解决方案

父控制器：

.controller(
    ...
    let model = $scope.model = {
        detach() {
            // remove the controller panel from dom
        },
        maximize() {
            // detach panel to a new child window
            this.detach();
            window.$windowScope = $scope; // $scope contains 'model' field
            $window.open('_child_window_url_', '_child_window_name_', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no - window params');
        },
        onClick() {
            // some DOM handler - button click, for example
        },
        ...
    };
    ...
);

儿童控制器：

1) 使用路由器：

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('_child_window_url_', {
      templateUrl: '_template_file_path_',
      controller: '_child_controller_name_'
    });
}])

2) 实现 DOM 处理程序以使它们调用父处理程序：

onClick: function () {
    window.opener.$windowScope.model.onClick();
},

【讨论】：