Angular (1.5.8) Dynamic Components

I ended up changing the dashboard.tpl.html file to:

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

But I also needed to add a build task to run through my widgets folder and generate the following (or you can manually add, whatever floats your boat I guess).

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

The above allows me to either use templateUrl, or inline templates.

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

You can do it. Firstly, you need to use wrapper component which helps you compile your dynamic component:

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: '=?'        }    });

your dynamic component:

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

and then:

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