Question

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

数据：

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

指令：

{{1}}

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

缺少什么？什么不应该在那里？

Answer 1

虽然您无法在其内部包含相同的指令，但您可以包含另一个包含第一个指令的指令。

angular ui tree似乎使用TreeNode和TreeNodes指令执行此操作。

Answer 2

[这是一个迟到的答案，但我认为有些人会觉得这很有用。]

嵌套指令会导致＆＃34;过多的递归＆＃34;错误。您可以使用this post中的RecursionHelper。

将RecursionHelper服务添加到角度模块后，您只需使用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);
    }

Angular树指令只有一个指令 - 递归太多了？

2 个答案: