使用 AngularJS 显示任何 TreeView 的一般方法

【问题标题】：General way to display any TreeView with AngularJS使用 AngularJS 显示任何 TreeView 的一般方法
【发布时间】：2023-04-05 08:41:01
【问题描述】：

我正在做一个项目，该项目部分包括显示文档的树状视图。

我最近遇到了一个问题，我不知道如何解决，所以我来这里寻求帮助。

问题是我有一个包含我需要的所有数据的数组。文件夹中有文档和/或文件夹中的文件夹等...我知道如何渲染每个文件夹的“孩子”，但问题是我不知道一般如何做。我编写了一个简单的 JSFiddle 来更好地说明问题：http://jsfiddle.net/k3nj6pco/

您可以看到显示孩子 1.1 和 1.2 很容易。但我不知道如何在不制作第三个ng-repeatloop 的情况下显示子 1.1.1。我想推广到 n 深度级别。

有谁知道我该如何解决这个问题？非常感谢您的宝贵时间！

【问题讨论】：

标签： angularjs treeview angularjs-ng-repeat

【解决方案1】：

我会用递归指令解决这个问题。

看看recursive directives

它的要点是：

<div ng-controller="IndexCtrl">
  <collection collection='locations'></collection>
</div>

app.directive('collection', function () {
  return {
      restrict: "E",
      replace: true,
      scope: {
          collection: '='
      },
      template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
  }
})

然后：

<member ng-repeat='member in collection' member='member'></member>

app.directive('member', function ($compile) {
  return {
      restrict: "E",
      replace: true,
      scope: {
          member: '='
      },
      template: "<li></li>",
      link: function (scope, element, attrs) {
          if (angular.isArray(scope.member.children)) {
              element.append("<collection collection='member.children'></collection>");
              $compile(element.contents())(scope)
          }
      }
  }
})

因此，如果仍有子项，则您正在编译成员指令中的集合指令。

亲切的问候

【讨论】：