我正嘗試使用Angular 1.5.8構建一種動態儀表板。直到最後的障礙我已經取得了體面的進步。這實際上是呈現動態組件。Angular(1.5.8)動態組件
我已經試過2個選擇,要麼加入ui-view
和編程通過在小部件的名稱,或,這是我猜的路線是更正確的,我需要弄清楚如何呈現動態小部件。
例如:正如我追加和項目的dashItems
集合,它應該呈現一個新的widget(基於我所提供的名稱)
我已經看到,我可以換出使用ngInclude
模板,但我仍然不清楚如何讓模板和控制器動態注入。 (EG所有我的模板不會共享一個共同的控制器)。
的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('mnWidgetLine: 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.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
,但t o完全誠實,我不確定如何在這種情況下使用它,如果它是正確的工具,或者我錯誤地處理這個問題?
2. 應我甚至可以將項目添加到這個國家提供者,例如,I /可能一個部件被視爲孩子的狀態(因此我不知道什麼會被視爲最佳實踐)
您是否閱讀過指令? –
@LarryTurtis是的,我很熟悉指令以及他們如何工作,但不是關於讓他們(或組件)動態呈現,例如在我的問題中,我仍然有點在黑暗中 –
我可能是誤解了意圖,但是您能夠動態編譯指令並將它們添加到頁面中,如[本帖]中所述(http://stackoverflow.com/questions/15279244/dynamically-add-directive-in-angularjs) ? –