javascript - How to use a component in $uibModal.open? -

there component option in angular-ui-bootstrap $uibmodal.open method. want use component b awidget.template.html html template modal opened component controller homedashboard. instead, have modal has component template homedashboard.template.html applied.

how can apply component b template awidget.template.html modal?

package versions:

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

app module

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 } './controllers/dashboardcontroller';  import { homedashboard } './dashboards/home/homedashboard.component'; import { otherdashboard } './dashboards/other/otherdashboard.component'; import { awidget } './widgets/a_widget/awidget.component';  import { storage } './services/storage.service.js'; import { object2array } './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'); }); 

component a

controller:

import _ '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; 

component:

import widgetsettingstemplate '../../templates/widget_settings.html'; import template './templates/homedashboard.template.html'; import controller './homedashboard.controller';  const homedashboard = {   controlleras: 'homedashboard',   controller,   template };  export { homedashboard }; 

component b

controller:

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

component:

import template './templates/awidget.template.html'; import { widgetsettingsctrl controller } './awidget.controller';  const awidgetdashboard = {   controlleras: 'awidget',   controller,   template };  export { awidgetdashboard }; 

app structure

../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 

it looks way:

it typo, applied wrong component while registering awidget.

.component('awidget', awidget) 

not

.component('awidget', otherdashboard)