Angular(1.5.8)动态组件 [英] Angular (1.5.8) Dynamic Components

问题描述

我正在尝试使用Angular 1.5.8构建一种动态仪表板.我已经取得了不错的进展，直到最后一关.实际上是在渲染动态组件.

I'm trying to build a sort of dynamic dashboard using Angular 1.5.8. I've made decent progress up until the final hurdle. Which is actually rendering the dynamic component.

我尝试了2个选项，要么添加ui-view并以编程方式传入窗口小部件的名称或，但这是我猜想的路径更多正确，我需要弄清楚如何呈现动态窗口小部件.

I've tried 2 options, either adding a ui-view and programatically passing in the name of the widget, or, and this is the route I'm guessing is more correct, I need to figure out how to render a dynamic widget.

例如:当我在dashItems集合中追加项目时，它将呈现一个新的小部件(基于我提供的名称)

For Example: As I append and item to the dashItems collection, it should render a new widget (based on the name I've provided)

我已经知道可以使用ngInclude交换模板，但是对于如何动态获取模板和控制器，我仍然不清楚. (例如，我所有的模板都不会共享同一个控制器).

I have seen that I can swap out templates using ngInclude, but I'm still unclear as to how to get a template and controller to be injected dynamically. (EG all my templates wont be sharing a common controller).

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>

问题:

1. 我已经研究过ngInclude，但是说实话，我不确定在这种情况下如何使用它，如果它是正确的工具，还是我使用方法不正确?

1. I've looked into ngInclude, but to be perfectly honest, I'm not sure how to go about using it in this instance, and IF it is the right tool for this, or am I approaching this incorrectly?

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

2. Should I even be adding items to the state provider for this, EG i / could a widget be seen as a child state (thus I'm not sure what would be seen as best practice)

推荐答案

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

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

但是我还需要添加一个构建任务，以在我的widgets文件夹中运行并生成以下内容(或者您可以手动添加，无论我猜是什么，都可以浮出水面.)

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

以上内容使我可以使用templateUrl或嵌入式模板.

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

这篇关于Angular(1.5.8)动态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！