각도 (1.5.8) 동적 구성 요소

Question

각도 1.5.8을 사용하여 일종의 동적 대시 보드를 작성하려고합니다. 마지막 장애물까지 괜찮은 진전을 보였습니다. 실제로 동적 구성 요소를 렌더링합니다.

나도 추가 ui-view 및 프로그래밍 방식으로 위젯의 이름으로 전달하는이 또는, 이것은 내가 추측하고있어 경로가 더 정확, 내가 어떻게 알아 내야,이 옵션을 시도했습니다

동적 위젯을 렌더링합니다.

예를 들어

: 내가 추가하고 항목 dashItems 컬렉션에, 그것은 새로운 위젯을 렌더링해야으로는

내가 ngInclude를 사용하여 템플릿을 교환 할 수 있음을 보았다 (I 제공 한 이름을 기준으로) ,하지만 템플릿과 컨트롤러를 동적으로 주입하는 방법에 대해서는 아직 명확하지 않습니다. (모든 템플릿은 공통 컨트롤러를 공유하지 않을 것이다).

자바 스크립트 :

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> 

질문 (들) :

1. I ngInclude을 조사했지만 o 완벽하게 솔직하게 말해서,이 인스턴스에서 사용하는 방법을 잘 모르겠다. 그리고 이것이 올바른 도구라면, 아니면 내가 잘못 접근하고 있는가?

2. 나는 심지어이의 상태 공급자에 항목을 추가 할 경우, EG I/위젯은 아이의 상태 (따라서 내가 모범 사례로 볼 수 될지 확실하지 않다)

Answer 1

로 볼 수있다

나는에 dashboard.tpl.html 파일을 변경 결국 :

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

그러나 나는 또한 내 위젯 폴더를 통해 실행하고 다음을 생성하는 빌드 작업을 추가하는 데 필요한 (또는 수동으로 추가 할 수 있습니다, 무엇이든 내가 생각 보트를 수레) .

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