Question

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

例如，我有一个视频播放器面板，我希望它变得可拆卸且可扩展。

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

...
<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 = { ... }
...

P.S。对不起我的英文。

Answer 1

在此https://stackoverflow.com/a/17066146/2982280和http://embed.plnkr.co/dz1A1h/

找到解决方案

家长控制器：

.navbar {
  width:100%;
  background: none !important;

  @media(max-width:34em){
    background:black !important;
  }

  .nav-bar-toggler {
    cursor:pointer;
    outline:0;
  }
}

儿童控制器：

1）使用路由器：

.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
        },
        ...
    };
    ...
);

2）实现DOM处理程序，使它们调用父处理程序：

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

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

1 个答案: