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

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?

The documentation explicitly states that Angular _"cannot handle directives that recursively use themselves in their own templates"_. — a better oliver, Aug 22 '15 at 18:02

score 0 · Answer 1 · answered Aug 22 '15 at 20:52

0

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.

answered Aug 22 '15 at 20:52

Isaac

2,173
1
13
15

score 0 · Answer 2 · edited May 23 '17 at 12:23

[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);
    }

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

2 Answers2