title: How to load dynamic inline template with angular
body: <p>I have an ng-repeat that loops over an array of objects. At each loop the value 'template' &amp; 'values' is initialised. The following version works and uses ng-include to load the template but it happens to be very very slow:</p>
  
  <pre><code>&lt;tr class="tableRowsDocs" ng-repeat="dbo in rows track by $index"&gt;
      &lt;div ng-init="values = dbo.get4(attobj.key); key = attobj.key; template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);"&gt;
      &lt;div class="content" ng-include="template"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The value for template and values is dynamic but it always holds the id of a template/script like:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="links_as_dns_template"&gt;
        &lt;div ng-repeat="dbo in values track by $index" ng-include="'link_as_dn_template'"&gt;&lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/ng-template" id="link_as_dn_template"&gt;
    &lt;a href="#/view/{{ dbo.cid }}"&gt;&lt;p&gt;{{ dbo.displayName() }}&lt;/p&gt;&lt;/a&gt;
  &lt;/script
  </code></pre>
  
  <p>Notice that the called template calles a second template also using ng-include.</p>
  
  <p>I am trying to make things faster by using a custom directive to load the templates but cant seem to be able to make the following example to work in my case:</p>
  
  <pre><code>app.directive('ngInline', [
    '$templateCache',
    function($templateCache) {
      return {
        restrict: 'A',
        priority: 400, // Same as ng-include.
        compile: function(element, attrs){
          var templateName = attrs.ngInline;
          if(!templateName){
            throw new Error('ngInline: expected template name');
          }
          var template = $templateCache.get(templateName);
            if(angular.isUndefined(template)){
            throw new Error('ngInline: unknown template ' + templateName);
          }
  
          element.html(template);
        }
      };
    }
  ]);
  </code></pre>
  
  <p>Can anyone explain to me how to do this properly and efficiently(average 100 rows x35 columns ->multivalued cells/render)</p>
  
  <p>This example is from:
  <a href="http://zachsnow.com/#!/blog/2014/angularjs-faster-ng-include/" rel="nofollow">http://zachsnow.com/#!/blog/2014/angularjs-faster-ng-include/</a></p>