Angular（1.5.8）動態組件

我正嘗試使用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 /可能一個部件被視爲孩子的狀態（因此我不知道什麼會被視爲最佳實踐）

來源

2016-11-16 Rohan Büchner

您是否閱讀過指令？ –

@LarryTurtis是的，我很熟悉指令以及他們如何工作，但不是關於讓他們（或組件）動態呈現，例如在我的問題中，我仍然有點在黑暗中 –

我可能是誤解了意圖，但是您能夠動態編譯指令並將它們添加到頁面中，如[本帖]中所述（http://stackoverflow.com/questions/15279244/dynamically-add-directive-in-angularjs）？ –

我結束了dashboard.tpl.html文件更改爲：

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

但我還需要添加一個構建任務，通過我的Widgets文件夾運行並生成以下（或你可以手動添加，不管你的船浮筒我猜）。

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

來源

2016-11-16 19:08:16

Angular（1.5.8）動態組件

回答

相關問題