title: Angular 1.5: dynamically load a component
body: <p>I am trying to create some sort of generic gridview using AngularJS 1.5 and its components. A (pseudocode) version of what I've got going right now:</p>
  
  <pre><code>// inside &lt;my-grid-component data="data" metadata="metadata"&gt;
  &lt;div ng-repeat="item in $ctrl.data"&gt;
      &lt;my-row-component item="item" metadata="$ctrl.metadata"&gt;&lt;/my-row-component&gt;
  &lt;/div
  
  // inside &lt;my-row-component item="item" metadata="metadata"&gt;
  &lt;div ng-repeat="column in $ctrl.metadata.columns"&gt;
      &lt;my-cell-component value="$ctrl.item[column]"&gt;&lt;/my-cell-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now <code>&lt;my-cell-component&gt;</code>could have some basic <code>ng-switch</code>statement that handles the obvious cases, like if the value is text or an image or something, but since this will be used by many people and on many projects, it is possible that someone will want to do something fancy and/or highly specific inside a cell. They <em>could</em> just ammend <code>&lt;my-cell-component&gt;</code> with more <code>ng-switch</code>es, but then they are messing with base framework code which hurts maintainability.</p>
  
  <p>So, ideally, I'd want to make something where a developer can optionally provide his own custom template for a specific field in the metadata, e.g. <code>metadata.columns[3].customCellComponentName = 'some-custom-template';</code> 
  Then <code>&lt;my-row-component&gt;</code> would look something like this:</p>
  
  <pre><code>&lt;div ng-repeat="column in $ctrl.metadata.columns"&gt;
      &lt;div ng-if="!column.isCustomCellComponent"&gt;
          &lt;my-cell-component value="$ctrl.item[column]"&gt;&lt;/my-cell-component&gt;
      &lt;/div&gt;
      &lt;div ng-if="column.isCustomCellComponent"&gt;
  ??? --&gt; &lt;column.customCellComponentName value="$ctrl.item[column]"&gt;&lt;/column.customCellComponentName&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The project automatically puts all templates in $templateCache, so resolving the template should not be a problem, but other than that, the marked line with the "???" obviously does not work. It demonstrates what I would like to achieve, but I have no idea how to actually do something like this. I looked into transclusion, <code>ng-include</code> and other solutions, but none seem to provide the option to dynamically load a template AND model-bind some data to it.</p>
  
  <p>Any and all ideas very much welcome. I would like to stay as far away from overly complex directives as possible. While they allow you to do many things, in my experience they are also a debugging and maintainability nightmare.</p>
  
  <p>Thanks.</p>