AngularJS ng-template inside ng-template for tree structure

Question

I face a logical problem with my code: I use a modalbox (bootstrapUI) as an ngTemplate in my AngularJS app. Inside the ngTemplate, I need to display a nested tree hierarchy (which means I'll have to use ngTemplate inside ngTemplate.

Here is the JSON structure of the tree's data:

{
"DROPBOX": {
    "/": {
        "name": "/",
        "source": "DROPBOX",
        "identifier": "none",
        "children": {
            "9 th grade class": {
                "name": "9 th grade class",
                "source": "DROPBOX",
                "identifier": "046ec8907f797029735b293f2fed8df5",
                "children": {}
            },
            "Documents": {
                "name": "Documents",
                "source": "DROPBOX",
                "identifier": "none",
                "children": {
                    "test": {
                        "name": "test",
                        "source": "DROPBOX",
                        "identifier": "264854fc64d1e0d410e78e0488cab8b8",
                        "children": {}
                    }
                }
            },
            "Photos": {
                "name": "Photos",
                "source": "DROPBOX",
                "identifier": "none",
                "children": {
                    "Sample Album": {
                        "name": "Sample Album",
                        "source": "DROPBOX",
                        "identifier": "6024199d9d312ba8347f515675321564",
                        "children": {}
                    }
                }
            },
            "some folder with a very very very very very very very long name": {
                "name": "some folder with a very very very very very very very long name",
                "source": "DROPBOX",
                "identifier": "700e932df5e5a678220b5e82e85dc2b2",
                "children": {}
            },
            "testhierarchy": {
                "name": "testhierarchy",
                "source": "DROPBOX",
                "identifier": "none",
                "children": {
                    "child": {
                        "name": "child",
                        "source": "DROPBOX",
                        "identifier": "748961a8a3502a48bd4082cd2c0339eb",
                        "children": {}
                    }
                }
            }
        }
    }
}

}

TL;DR the JSON is structured as

data.dropbox - {name: 'example', children: [ {name: 'asd', ]}

Some help would be really appreciated.

Answer 1

It is something like below. So the html:

/* this will be on your normal html */
<tree></tree>

/* this is in the treeDirective.html and you bind to the inner scope. */
<tree></tree>

The directive:

.directive("tree", function (RecursionHelper) {
    return {
        restrict: "E",
        scope: { },
        replace: true,
        templateUrl: './partials/treeDirective.html',
        compile: function(element) {
            return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn) {
                // Define your normal link function here.
                // Alternative: instead of passing a function,
                // you can also pass an object with 
                // a 'pre'- and 'post'-link function.
             };
        }
    };
})

The recursion factory.

.factory('RecursionHelper', [
    '$compile', function($compile) {
        return {
        /**
            * Manually compiles the element, fixing the recursion loop.
            * @param element
            * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
            * @returns An object containing the linking functions.
            */
        compile: function(element, link) {
            // Normalize the link parameter
            if (angular.isFunction(link)) {
                link = { post: link };
            }

            // Break the recursion loop by removing the contents
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: (link && link.pre) ? link.pre : null,
                /**
                    * Compiles and re-adds the contents
                    */
                post: function(scope, element) {
                    // Compile the contents
                    if (!compiledContents) {
                        compiledContents = $compile(contents);
                    }
                    // Re-add the compiled contents to the element
                    compiledContents(scope, function(clone) {
                        element.append(clone);
                    });

                    // Call the post-linking function, if any
                    if (link && link.post) {
                        link.post.apply(null, arguments);
                    }
                }
            };
        }
    };
}]);

See how you get on witht that. On the directive obviously you can put anything onto that scope, then you will have to write some code that will get the sub child and set that as the scope.