组合多个吴-重复

Question

我有一个HTML结构，其中每个孩子都有不同的长度值：

<div ng-repeat='element in treeView'> 
    <div ng-repeat='element1 in element.children'> 
     <div ng-repeat='element2 in element1.children'> 
      <div ng-repeat='element3 in element2.children'> 
       <div ng-repeat='element4 in element3.children'> 
        <div ng-repeat='element5 in element4.children'> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我不喜欢多ng-repeat。

如何重新构造代码？

Answer 1

要为treeView的所有子节点递归创建DOM节点，您可以创建一个新组件。

用法示例：

<your-directive elements="vm.elements"></your-directive> 

组件代码：

angular.module('yourApp') 
    .component('yourDirective', { 
    templateUrl: 'template.html', 
    bindings: { 
     elements: '=' 
    }, 
    bindToController: true, 
    controllerAs: 'vm' 
    }); 

模板代码：

<div ng-repeat="element in vm.elements"> 
    <your-directive ng-if="vm.elements.children.length > 0" elements="vm.elements"></your-directive> 
</div> 

注：我没有测试代码，但有一点修修补补，你应该让这个工作。