Javascript AngularJS ng模板用于树结构的ng模板内部

我的代码面临一个逻辑问题： 我在AngularJS应用程序中使用modalbox（bootstrapUI）作为ngTemplate。在ngTemplate中，我需要显示嵌套的树层次结构（这意味着我必须在ngTemplate中使用ngTemplate）

以下是树数据的JSON结构：

{
"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；DRJSON的结构如下

data.dropbox-{name:'example'，子项：[{name:'asd'，]}

---

非常感谢您的帮助。

如下图所示。因此，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>

递归工厂

.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);
                    }
                }
            };
        }
    };
}]);

---

看看你是怎么做的。在指令上，显然你可以把任何东西放在这个作用域上，然后你必须编写一些代码来获取子项并将其设置为作用域。

我在stackoverflow上找到了一个递归指令

.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);
                    }
                }
            };
        }
    };
}]);