Question

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

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

例如：当我向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，但是说实话，我不确定如何在这种情况下使用它，如果它是正确的工具，或者我接近这个错误？< / p>

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>

Angular（1.5.8）动态组件

2 个答案: