Question

我的代码面临逻辑问题：我在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', ]}

非常感谢一些帮助。

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

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

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

1 个答案: