Будет ли грамотен такой подход в angularJS?

Question

[Testtest132]

Хотелось бы узнать стоит ли так поступать:

Допустим у нас ng-repeat по массиву объектов, в самих объектах есть еще массивы т.е нужен nested ng-repeat;
Чтоб не загромождать код я добавил директиву как атрибут, в которую передаю этот массив, а она уже рендерит его.

Вариант с nested:

<ul>
  <li ng-repeat="item in items">
    {{ item.name }}
    <div ng-repeat="_item in item.array">{{_item}}</div>
   </li>  
  </ul>

или же сделать директивой

<ul>
  <li ng-repeat="item in items">
    {{ item.name }}
     <div renderArray="item.array"></div>
    </li>  
  </ul>

Answer 1

[Сергей Протько]

А в renderArray уже городить ng-repeat? Либо все это делайте директивой, либо не парьтесь и используйте вложенный ng-repeat. Ну или если то что у вас в renderArray можно использовать отдельно - то тогда имеет смысл. Если оно именно "рендрит массив", то есть там какой-то ваш цикл который формирует DOM - лучше все же использовать ng-repeat который скорее всего всеравно будет быстрее работать.

Если вас парит вопрос производительности - читайте про track by. Если у вас списки меняются редко, или вы точно знаете как меняются данные, можно получить неплохой прирост производительности за счет меньшего количества операций с DOM.

Answer 2

[Тимофей]

Ну если уровень вложенности всегда один и небольшой, то почему бы и не использовать вложенные ng-repeat. В противном случае получается древовидная структура - тогда просто нужно сделать рекурсивное подключение шаблона в том же ng-repeat, что-то типа такого:

<script type="text/ng-template" id="tree-tmpl">
<ul>
    <li ng-repeat="item in list">
        {{item.name}}
        <div
                ng-if="item.children && item.children.length"
                ng-init="list=item.children"
                ng-include="'tree-tmpl'"
        ></div>
    </li>
</ul>
</script>

<div class="tree-list" ng-include="'tree-tmpl'"></div>