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 (http://dbushell.github.com/Nestable/ is on my mind, if this matters).
I have a solution, but it is far from being elegant. Here is HTML code (full sample can be found at http://jsfiddle.net/DQjve/):
<div ng-app="TestApp" ng-controller="TestCtrl">
<script type="text/ng-template" id="tree.html">
<div>
<ng-include src="'branch.html'"></ng-include>
</div>
</script>
<script type="text/ng-template" id="branch.html">
<ul>
<li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
</li>
</ul>
</script>
<script type="text/ng-template" id="leaf.html">
<ng-include src="template"></ng-include>
<ng-include src="'branch.html'"></ng-include>
</script>
<script type="text/ng-template" id="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</script>
<tree root="tree" template="my-leaf.html"></tree>
</div>
Desired code would look like this:
<div ng-app="TestApp" ng-controller="TestCtrl">
<tree root="tree" template="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</tree>
</div>
Goals:
- (less important) Put all utility templates inside directive JavaScript code.
- (more important) Use contents of the <tree> tag as node template.
But I cannot find the solution.
For point 1: Probably, I need to use $templateCache to pre-cache my templates? With some unique template names? Is there any better solution?
For point 2: Should I use ngTransclude for p.2? If yes, how? Is there a way to get contents of initial <tree> tag as a string, before any compilation occurs?
