title: Tree-view in AngularJS with customizable node template
body: <p>I want to create a directive that will take tree-like data and feed it to some tree-view script (that uses markup as input), using specific HTML template to render nodes. So, directive takes data + node template as input, inserts DOM subtree, and then calls third-party plugin to make it sortable (<a href="http://dbushell.github.com/Nestable/" rel="nofollow">http://dbushell.github.com/Nestable/</a> is on my mind, if this matters).</p>
  
  <p>I have a solution, but it is far from being elegant. Here is HTML code (full sample can be found at <a href="http://jsfiddle.net/DQjve/" rel="nofollow">http://jsfiddle.net/DQjve/</a>):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="TestApp" ng-controller="TestCtrl"&gt;
      &lt;script type="text/ng-template" id="tree.html"&gt;
          &lt;div&gt;
              &lt;ng-include src="'branch.html'"&gt;&lt;/ng-include&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;script type="text/ng-template" id="branch.html"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'"&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/script&gt;
  
      &lt;script type="text/ng-template" id="leaf.html"&gt;
          &lt;ng-include src="template"&gt;&lt;/ng-include&gt;
          &lt;ng-include src="'branch.html'"&gt;&lt;/ng-include&gt;
      &lt;/script&gt;
  
      &lt;script type="text/ng-template" id="my-leaf.html"&gt;
          &lt;span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;"&gt;{{leaf.name}}&lt;/span&gt;
      &lt;/script&gt;
  
      &lt;tree root="tree" template="my-leaf.html"&gt;&lt;/tree&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Desired code would look like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="TestApp" ng-controller="TestCtrl"&gt;
      &lt;tree root="tree" template="my-leaf.html"&gt;
          &lt;span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;"&gt;{{leaf.name}}&lt;/span&gt;
      &lt;/tree&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Goals:</p>
  
  <ol>
  <li>(less important) Put all utility templates inside directive JavaScript code.</li>
  <li>(more important) Use contents of the &lt;tree&gt; tag as node template.</li>
  </ol>
  
  <p>But I cannot find the solution.</p>
  
  <p>For point 1: Probably, I need to use <code>$templateCache</code> to pre-cache my templates? With some unique template names? Is there any better solution?</p>
  
  <p>For point 2: Should I use <code>ngTransclude</code> for p.2? If yes, how? Is there a way to get contents of initial &lt;tree&gt; tag as a string, before any compilation occurs?</p>