Angularjs recursive directive

Question

I am trying to write a recursive directive. I have seen this thread: Recursion in Angular directives

It works when you put the recursive directive under ul-li but goes into infinite loop with a table-tr

<table> 
  <tr>
    <td>{{ family.name  }}</td>
  </tr>
  <tr ng-repeat="child in family.children">
    <tree family="child"></tree>
  </tr>
</table>

Here is a plunker : http://plnkr.co/edit/PGltFjFIBMRtRTZfT0P0?p=info

EDIT: I am not trying to build a tree directive.In my recursive directive I have to use table and tr tags.

score 0 · Answer 1 · answered Sep 11 '15 at 14:56

0

Apparently, you have to put nested table inside a td

<table> 
  <tr>
    <td>{{ family.name  }}</td>
  </tr>
  <tr ng-repeat="child in family.children">
    <td>
      <tree family="child"></tree>
    </td>
  </tr>
</table>

answered Sep 11 '15 at 14:56

enesaltinok

55
1
7

score -1 · Accepted Answer · answered Sep 11 '15 at 13:35

That tree directive works for me:

HTML:

<ul>
    <li ng-repeat="child in parent.children">
        <label>{{child.display}}</label>
        <frc-business-items-tree-list parent="child" search="someSearchQry" ng-if="child.children && child.children.length > 0"></frc-business-items-tree-list>
    </li>
</ul>

Directive:

.directive('frcBusinessItemsTreeList', function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var parent = attrs.parent;
            var searchQry = attrs.search;
            var template =
                '<ul>' +
                '   <li ng-repeat="child in ' + parent + '.children | filter:' + searchQry + '">' +
                '      <label>{{child.display}}</label>' +
                '      <frc-business-items-tree-list parent="child" search="' + searchQry + '" ng-if="child.children && child.children.length > 0"></frc-business-items-tree-list>' +
                '   </li>' +
                '</ul>';

            element.html('').append($compile(template)(scope));
        }
    }
})

This one also fails when I try to do it with a table.I have to use a table in my directive.I am not trying to build a tree.The example in the plunker is a simplified version of my directive. — enesaltinok, Sep 11 '15 at 13:43
include new table inside each recursive function, do not understand how you can fail it — Dmitri Algazin, Sep 11 '15 at 14:07

Angularjs recursive directive

2 Answers2