Angularjs 角度树指令只有一个指令-递归太多？

我试图避免编写编译和/或链接函数。我只想使用控制器功能。为什么我得到了“太多的递归”

数据：

$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}
            ]
        }
    ]
};

标记：

<tree data="myTree" labelfield="name" valuefield="id" childrenfield="items">
<div>
    This is the custom node content.
</div>

这是自定义节点内容。

该指令：

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

angular.module（“app”）.指令（“树”，函数（$compile）{
返回{
限制：“E”，
替换：正确，
是的，
范围：{
拉贝尔菲尔德：“@”，
值字段：“@”，
childrenfield:“@”，
数据：“=”
},        
控制器：功能（$scope）{
$scope.children=[]；//记住-这些不是模型的子项！！！
if（$scope.data[$scope.childrenfield]！==未定义）{
对于（变量i=0；i<$scope.data[$scope.childrenfield].length；i++）{
$scope.children.push({
标签：$scope.data[$scope.childrenfield][i][$scope.labelfield]，
值：$scope.data[$scope.childrenfield][i][$scope.valuefield]
});
}
}
},      
模板：“
”+
“
{{child.label}”+
""   +
“
”+
“
”
};
});

如果我删除模板中的标记，它将只显示第一级，否则，我将得到无限递归

---

少了什么？什么不应该存在？

看起来，虽然不能在其内部包含相同的指令，但可以包含包含第一个指令的另一个指令

---

似乎是通过TreeNode和TreeNodes指令实现的

看起来，虽然不能在其内部包含相同的指令，但可以包含包含第一个指令的另一个指令

---

似乎是通过TreeNode和TreeNodes指令实现的

[这是一个迟来的答案，但我认为有些人会发现这很有用。]

嵌套指令将导致“太多递归”错误。您可以从中使用RecursionHelper

将

RecursionHelper

服务添加到angular模块后，只需使用

RecursionHelper.compile

函数编译指令元素

compile: function(element) {
        // Use the compile function from the RecursionHelper,
        // And return the linking function(s) which it returns
        return RecursionHelper.compile(element);
    } 

---

[这是一个迟来的答案，但我认为有些人会发现这很有用。]

嵌套指令将导致“太多递归”错误。您可以从中使用RecursionHelper

将

RecursionHelper

服务添加到angular模块后，只需使用

RecursionHelper.compile

函数编译指令元素

compile: function(element) {
        // Use the compile function from the RecursionHelper,
        // And return the linking function(s) which it returns
        return RecursionHelper.compile(element);
    } 

---

创建一个plunker，将更容易文档明确声明Angular“无法处理在自己模板中递归使用自己的指令”。创建plunker，将更容易文档明确声明Angular“无法处理在自己模板中递归使用自己的指令”。