如何在$ uibModal.open中使用组件？

Question

angular-ui-bootstrap $uibModal.open方法中有component option。我想将组件B aWidget.template.html HTML模板用于从组件A控制器homeDashboard打开的模式。相反，我有模型，其中应用了组件A模板homeDashboard.template.html。

如何将组件B模板aWidget.template.html应用于模态？

套餐版本：

"angular": "^1.5.11",
"angular-ui-bootstrap": "^2.5.0",

应用模块

app.js

import 'angular';
import 'angular-ui-router';
import 'angular-gridster';
import 'angular-ui-bootstrap';
import 'javascript-detect-element-resize';

import '../style/style.css';
import '../style/style-common.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'angular-gridster/dist/angular-gridster.min.css';

import { DashboardCtrl } from './controllers/dashboardController';

import { homeDashboard } from './dashboards/home/homeDashboard.component';
import { otherDashboard } from './dashboards/other/otherDashboard.component';
import { aWidget } from './widgets/a_widget/aWidget.component';

import { Storage } from './services/storage.service.js';
import { Object2Array } from './filters/object2Array.js';

const app = angular.module('dashboardApp', [
    'ui.router',
    'ui.bootstrap',
    'gridster'
])
.controller('DashboardCtrl', DashboardCtrl)
.component('homeDashboard', homeDashboard)
.component('otherDashboard', otherDashboard)
.component('aWidget', otherDashboard)
.factory('StorageService', () => new Storage())
.filter('object2Array', Object2Array);

app.config(function ($urlRouterProvider, $stateProvider) {

  const homeState = {
    name: 'home',
    url: '/home',
    component: 'homeDashboard'
  };

  const otherState = {
    name: 'other',
    url: '/other',
    component: 'otherDashboard'
  };

  $stateProvider.state(homeState);  
  $stateProvider.state(otherState);  

  $urlRouterProvider.otherwise('/home');
});

组件A

控制器：

import _ from 'lodash';

const injectParams = ['$scope', '$uibModal', 'StorageService'];
const HomeDashboardCtrl = function($scope, $uibModal, StorageService) {

  const self = this;
  self.view = 'home';
  self.title = 'Home';

  self.dashboards = StorageService.listDashboards();
  self.dashboard = _.find(self.dashboards, d => d.view === self.view); 

    self.remove = function(widget) {
        self.dashboard.widgets.splice(self.dashboard.widgets.indexOf(widget), 1);
    self.dashboards[self.dashboard.view] = self.dashboard;
    StorageService.saveDashboards(self.dashboards);
    };

    self.openSettings = function(widget) {
        $uibModal.open({
            scope: $scope,
            resolve: {
                widget: function() {
                    return widget;
                }
            },
      component: 'aWidget'
        });
    };
};

HomeDashboardCtrl.$inject = injectParams;

export default HomeDashboardCtrl;

组件：

import widgetSettingsTemplate from '../../templates/widget_settings.html';
import template from './templates/homeDashboard.template.html';
import controller from './homeDashboard.controller';

const homeDashboard = {
  controllerAs: 'homeDashboard',
  controller,
  template
};

export { homeDashboard };

组件B

控制器：

const injectParams = ['$scope', '$timeout', '$rootScope', '$uibModalInstance', 'widget'];
const WidgetSettingsCtrl = function($scope, $timeout, $rootScope, $uibModalInstance, widget) {
  const self = this;
    self.widget = widget;

    self.form = {
        name: widget.name,
        sizeX: widget.sizeX,
        sizeY: widget.sizeY,
        col: widget.col,
        row: widget.row
    };

    self.sizeOptions = [{
        id: '1',
        name: '1'
    }, {
        id: '2',
        name: '2'
    }, {
        id: '3',
        name: '3'
    }, {
        id: '4',
        name: '4'
    }];

    self.dismiss = function() {
        $uibModalInstance.dismiss();
    };

    self.remove = function() {
        self.dashboard.widgets.splice(self.dashboard.widgets.indexOf(widget), 1);
        $uibModalInstance.close();
    };

    self.submit = function() {
        angular.extend(widget, self.form);
        $uibModalInstance.close(widget);
    };

};

WidgetSettingsCtrl.$inject = injectParams;
export { WidgetSettingsCtrl };

组件：

import template from './templates/aWidget.template.html';
import { WidgetSettingsCtrl as controller } from './aWidget.controller';

const aWidgetDashboard = {
  controllerAs: 'aWidget',
  controller,
  template
};

export { aWidgetDashboard };

应用结构

../angular-dashboard/
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── app
│   │   ├── app.js
│   │   ├── controllers
│   │   │   ├── dashboardController.js
│   │   │   └── widgetSettingsController.js
│   │   ├── dashboards
│   │   │   ├── home
│   │   │   │   ├── homeDashboard.component.js
│   │   │   │   ├── homeDashboard.controller.js
│   │   │   │   └── templates
│   │   │   │       └── homeDashboard.template.html
│   │   │   └── other
│   │   │       ├── otherDashboard.component.js
│   │   │       ├── otherDashboard.controller.js
│   │   │       └── templates
│   │   │           └── otherDashboard.template.html
│   │   ├── filters
│   │   │   └── object2Array.js
│   │   ├── services
│   │   │   └── storage.service.js
│   │   ├── templates
│   │   │   └── widget_settings.html
│   │   └── widgets
│   │       └── a_widget
│   │           ├── aWidget.component.js 
│   │           ├── aWidget.controller.js
│   │           └── templates
│   │               └── aWidget.template.html
│   ├── index.html
│   └── style
│       ├── style-common.css
│       └── style.css
└── webpack.config.js

它看起来像这样：

Answer 1

这是一个错字，我在注册aWidget时应用了错误的组件。

.component('aWidget', aWidget)

不是

.component('aWidget', otherDashboard)