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

问题描述

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

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

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

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

JavaScript:

角度.module('myDashboard', []).config(路由配置).component('仪表板', {templateUrl: 'dashboard/dashboard.tpl.html',控制器:仪表板控制器}).component('widgetPie', {模板:'<h3>饼图</h3>',控制器:函数($log){$log.info('widgetPie: 加载');}}).component('widgetLine', {模板:'<h3>折线图</h3>',控制器:函数($log){$log.info('WidgetLine: 已加载');}});功能路由配置($stateProvider){//这只有在我走 ui-view 路线时才需要.我假设$stateProvider.state('widgetPie', {组件:'widgetPie'}).state('widgetLine', {组件:'widgetLine'});}功能仪表板控制器($log){$log.info('在仪表板');this.dashItems = [{小部件:'widgetPie'}，{小部件:'widgetLine'}];}

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

<ul><li ng-repeat="dashItems 中的项目"><!-- 以某种方式呈现动态--><!--<widget-pie></widget-pie>--><!--<div ui-view="item.widget"></div>--></li></ul></div>

问题:

1.我研究了 ngInclude，但老实说，我不确定在这种情况下如何使用它，如果它是正确的工具，或者我正在接近这个错了吗?

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

解决方案

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

<ul><li ng-repeat="dashItems 中的项目"><div ng-include="item.widget"></div></li></ul></div>

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

角度.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',控制器:函数($log){$log.info('widgetPie: 加载');}}).component('widgetLine', {模板:'<h1>一些内容</h1>',控制器:函数($log){$log.info('widgetLine: 加载');}})

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.

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.

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

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

Markup (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>

Question(s):

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

解决方案

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

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