Question

我正在尝试编写一个递归指令。我见过这个帖子：Recursion in Angular directives

当您将递归指令放在ul-li下但使用table-tr

进入无限循环时，它会起作用

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

这是一个掠夺者：http://plnkr.co/edit/PGltFjFIBMRtRTZfT0P0?p=info

编辑：我不是要构建一个树指令。在我的递归指令中，我必须使用table和tr标签。

Answer 1

显然，您必须将嵌套表放在td

中

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

Answer 2

该树指令对我有用：

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('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));
        }
    }
})

Angularjs递归指令

2 个答案: