Angular tree directive with only one directive - too much recursion? - angularjs

Question

I am trying to avoid writing the compile and/or link functions. I only want to use the controller function. Why am I getting "too much recursion"?
The data:
$scope.myTree = {
name: "Root",
id: 1,
items: [
{
name: "Arts",
id: 12,
items: [
{ name: "Sculpture", id: 220 },
{ name: "Painting", id: 221 },
{ name: "Music", id: 222 }
]
},
{
name: "Science",
id: 45,
items: [
{ name: "Biology", id: 345 },
{ name: "Chemistry", id: 346 },
{ name: "Physics", id: 347}
]
}
]
};
The markup:
<tree data="myTree" labelfield="name" valuefield="id" childrenfield="items">
<div>
This is the custom node content.
</div>
The directive:
angular.module("app").directive("tree", function ($compile) {
return {
restrict: "E",
replace: true,
transclude: true,
scope: {
labelfield: "#",
valuefield: "#",
childrenfield: "#",
data: "="
},
controller: function ($scope) {
$scope.children = []; // remember - these are NOT the model's children!!!
if ($scope.data[$scope.childrenfield] !== undefined) {
for (var i = 0; i < $scope.data[$scope.childrenfield].length; i++) {
$scope.children.push({
label: $scope.data[$scope.childrenfield][i][$scope.labelfield],
value: $scope.data[$scope.childrenfield][i][$scope.valuefield]
});
}
}
},
template: "<ul><li ng-transclude></li>" +
"<li ng-repeat='child in children'> {{child.label}}" +
"<tree labelfield='labelfield' valuefield='valuefield' childrenfield='childrenfield'></tree>" +
"</li>" +
"</ul>"
};
});
If I remove the tag in the template, it will show only the first level, otherwise, I'll get infinite recursion.
What is missing? What shouldn't be there?

Answer 1

It appears that while you can't include the same directive inside itself, you can include another directive that includes the first one.
angular ui tree appears to do this with the TreeNode and TreeNodes directives.

Answer 2

[This is a late answer, but I think some people will find this useful.]
Nested directives will cause that "too much recursion" error. You may use RecursionHelper from this post.
After adding RecursionHelper service to your angular module, you just need to compile your directive element using RecursionHelper.compile function.
compile: function(element) {
// Use the compile function from the RecursionHelper,
// And return the linking function(s) which it returns
return RecursionHelper.compile(element);
}