用于树结构的 ng-template 内的 AngularJS ng-template答案

【问题标题】：AngularJS ng-template inside ng-template for tree structure用于树结构的 ng-template 内的 AngularJS ng-template
【发布时间】：2015-06-19 08:10:45
【问题描述】：

我的代码遇到了一个逻辑问题：我在 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;DR JSON 的结构为

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

我们将不胜感激。

【问题讨论】：

我在 stackoverflow 上找到了这个东西的递归指令

标签： javascript json angularjs tree

【解决方案1】：

如下所示。所以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>

指令：

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

递归工厂。

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

看看你是怎么做到的。显然，在指令上，您可以将任何内容放在该范围内，然后您必须编写一些代码来获取子子项并将其设置为范围。

【讨论】：