Kątowe (1.5.8) komponenty dynamiczne

Question

Próbuję zbudować rodzaj dynamicznego pulpitu przy użyciu Angular 1.5.8. Zrobiłem przyzwoite postępy aż do ostatecznej przeszkody. Który faktycznie renderuje komponent dynamiczny.

Próbowałem 2 opcje, albo dodanie ui-view i programowo przechodzącą w imieniu widget, lub, a to jest droga Zgaduję jest więcej poprawne, muszę dowiedzieć się, w jaki sposób do renderowania dynamicznego widgetu.

Dla przykładu: Jak dołączyć i element do kolekcji dashItems, powinien uczynić nowy widżet (na podstawie nazwy, jakie przewidziano)

Widziałem, że mogę zamienić z szablonów za pomocą ngInclude , ale wciąż nie jestem pewien, jak uzyskać szablon i kontroler do dynamicznego wtrysku. (EG wszystkie moje szablony nie będą dzielić wspólnego kontrolera).

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

Markup (deska rozdzielcza/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> 

Pytanie (a):

1. I Zajrzałem do ngInclude, ale t o bądź całkowicie szczery, nie jestem pewien, jak go użyć w tym przypadku, i JEŚLI to jest właściwe narzędzie do tego, czy podchodzę do tego niepoprawnie?

2. powinienem być nawet dodawanie elementów do dostawcy upoważnione do tego, EG I/mogła widget być postrzegane jako stan dziecka (a więc nie jestem pewien, co będzie postrzegane jako najlepsza praktyka)

Answer 1

skończyło się na zmianę pliku dashboard.tpl.html do:

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

Ale Musiałem także dodać zadanie build do uruchomienia przez mojego katalogu widgetów i generować następujące (lub można ręcznie dodać, niezależnie od pływaki łódź chyba) .

angular 
.module('myDashboard') 
.run(function ($templateCache) { 
    $templateCache.put('widgetPie', '<widget-pie></widget-pie>'); 
    $templateCache.put('widgetLine', '<widget-line></widget-line>'); 
}); 

Powyższe pozwala użyć albo templateUrl, albo wbudowanych szablonów.

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