javascript - 结合多个Ng重复

我有一个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。

如何重新构造代码？

最佳答案

要为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>

注意：我尚未测试此代码，但稍作修改，您应该可以使用它。