Will this approach be literate in angularJS?

Question

JavaScript

I would like to know if it is worth doing this:

Let's say we have ng-repeat on an array of objects, there are also arrays in the objects themselves, i.e. we need nested ng-repeat;
In order not to clutter up the code, I added a directive as an attribute, to which I pass this array, and it already renders it.

Variant with nested:

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

or make it a directive

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

Answer 1

And in renderArray already fence ng-repeat? Either do all this with a directive, or don't worry and use a nested ng-repeat. Well, or if what you have in renderArray can be used separately, then it makes sense. If it just "renders an array", that is, there is some kind of your cycle that forms the DOM - it's better to use ng-repeat, which will most likely work faster anyway.
If you're concerned about performance, read the track by. If your lists rarely change, or you know exactly how the data changes, you can get a nice performance boost due to fewer DOM operations.

Answer 2

Well, if the nesting level is always the same and small, then why not use nested ng-repeat. Otherwise, a tree structure is obtained - then you just need to make a recursive connection of the template in the same ng-repeat, something like this:

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