組合多個吳-重複

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> 

注：我沒有測試代碼，但有一點修修補補，你應該讓這個工作。