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

我试图避免编写编译和/或链接函数。我只想使用控制器功能。为什么我得到“太多的递归”？只有一个指令的角度树指令 - 递归太多？

数据：

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

如果我删除模板标签，它会显示只有第一级，ot herwise，我会得到无限的递归。

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

来源

2015-08-22 Mickael Caruso

创建plunker，会更容易 – joyBlanks

的文件明确指出，角_“无法处理递归地使用自己在自己的模板指令” _。 – zeroflagL

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

angular ui tree似乎用TreeNode和TreeNodes指令来做到这一点。

来源

2015-08-22 20:52:32 Isaac

[这是一个迟到的回答，但我想有些人会觉得这是有用的。]

嵌套指令将导致“太多递归”错误。您可以使用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); 
    }

来源

2016-01-07 08:09:24

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

回答

相关问题