Angular(1.5.8)动态组件

Question

我正在尝试使用Angular 1.5.8构建一种动态仪表板.直到最后的障碍,我取得了不错的进步.这实际上是渲染动态组件.

我已经尝试了2个选项,要么添加一个ui-view并以编程方式传递窗口小部件的名称,要么,这就是我猜的路径更正确,我需要弄清楚如何渲染动态窗口小部件.

例如:当我将item和item附加到dashItems集合时,它应该呈现一个新的小部件(基于我提供的名称)

我已经看到我可以使用替换模板ngInclude,但我仍然不清楚如何动态注入模板和控制器.(我所有的模板都不会共享一个共同的控制器).

JavaScript的:

angular
    .module('myDashboard', [])
    .config(routesConfig)
    .component('dashboard', {
        templateUrl: 'dashboard/dashboard.tpl.html',
        controller: dashboardController
    })
    .component('widgetPie', {
        template: '<h3>Pie Graph</h3>',
        controller: function($log) {
            $log.info('widgetPie: loaded');
        }
    })
    .component('widgetLine', {
        template: '<h3>Line Graph</h3>',
        controller: function($log) {
            $log.info('WidgetLine: loaded');
        }
    });

function routesConfig($stateProvider) {
    // this is only needed if I go the ui-view route.. I assume
    $stateProvider
        .state('widgetPie', { component: 'widgetPie'})
        .state('widgetLine', { component: 'widgetLine'});
}

function dashboardController($log) {
    $log.info('in dashboard');
    this.dashItems = [
        { widget:'widgetPie' },
        { widget:'widgetLine' }
    ];
}

标记(dashboard/dashboard.tpl.html):

<div>
    <ul>
        <li ng-repeat="item in dashItems">
            <!--somehow render dynamic-->
            <!--<widget-pie></widget-pie>-->
            <!--<div ui-view="item.widget"></div>-->
        </li>
    </ul>
</div>

问题(S):

1.我已经调查过ngInclude,但是说实话,我不确定如何在这种情况下使用它,如果它是正确的工具,或者我接近这个错误？

2.我是否应该为此向州提供者添加项目,EG i /可以将小部件视为子状态(因此我不确定什么将被视为最佳实践)

Answer 1

我最终将dashboard.tpl.html文件更改为:

<div>
    <ul>
        <li ng-repeat="item in dashItems">
            <div ng-include="item.widget"></div>
        </li>
    </ul>
</div>

但是我还需要添加一个构建任务来运行我的小部件文件夹并生成以下内容(或者你可以手动添加,无论你猜想你的小船浮动).

angular
 .module('myDashboard')
 .run(function ($templateCache) {
    $templateCache.put('widgetPie', '<widget-pie></widget-pie>');
    $templateCache.put('widgetLine', '<widget-line></widget-line>');
 });

以上允许我使用templateUrl或内联模板.

.component('widgetPie', {
   templateUrl: 'dashboard/widgetPie.tpl.html',
   controller: function($log) {
      $log.info('widgetPie: loaded');
   }
})
.component('widgetLine', {
    template: '<h1>Some Content</h1>',
    controller: function($log) {
      $log.info('widgetLine: loaded');
    }
})

Answer 2

你能行的。首先，您需要使用包装器组件来帮助您编译动态组件：

app.component('dynamicWrapper',
    {
        controller: function widgetClientCtrl($scope, $compile, $element) {
                    var self = this;
                    self.$onInit = function () {
                          renderWidget(self.name, self.payload);
                    };
                    function renderWidget(name, payload) {
                          var template = '<' + name;

                          if (payload) {
                             $scope.payload = payload;
                             template += ' payload="payload"';
                          }

                          template += '></' + name + '>';
                          $element.append($compile(template)($scope));
                    }
        },
        bindings: {
            name: '@',
            payload: '=?'
        }
    });

你的动态组件：

app.component('someDynamicComponent', {
    templateUrl: 'yourPath',
    controller: dynamicComponentCtrl,
    controllerAs: 'vm',
    bindings: {
        payload: '<'
    }
});

进而：

<li ng-repeat="(name, payload) in vm.dynamicComponents">
      <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
</li>