表示树结构的角递归指令需要添加文件列表答案

【问题标题】：Angular recursive directive to represent tree structure needs adding file list表示树结构的角递归指令需要添加文件列表
【发布时间】：2020-10-26 10:14:45
【问题描述】：

我一直在尝试更新此指令以将 fileList 添加到树结构中，但没有成功。原来的工作正常（https://embed.plnkr.co/plunk/JgQu3r），但它只考虑目录。在我的数据结构中，任何目录都可以有一个fileList，以及任意数量的嵌套directoryList等等。

function MainController($scope) {
  $scope.menu = [{
      name: 'one',
      directoryList: [{
        name: 'one'
      }, {
        name: 'two'
      }],
      fileList: ['one.pdf', 'two.pdf', 'three.pdf']
    },
    {
      name: 'two',
      directoryList: [{
        name: 'one',
        directoryList: [{
          name: 'one'
        }],
        fileList: ['one.pdf', 'two.pdf', 'three.pdf', 'four.pdf']
      }]
    },
    {
      name: 'three'
    }
  ];
}

function myMenu() {
  return {
    scope: {
      myMenu: '=myMenu'
    },
    template: '<li ng-repeat="item in myMenu"><my-menu-item></my-menu-item></li>',
    link: function(scope, elem) {}
  }
}

function myMenuItem($compile) {
  return {
    template: '<a href ng-bind="item.name" ng-click="show($event)"></a>',
    link: function(scope, element) {
      if (angular.isArray(scope.item.menu)) {
        element.append($compile('<ul ng-if="collapsed" my-menu="item.menu"></ul>')(scope));

      }
      scope.show = function($event) {
        scope.collapsed = !scope.collapsed;
      }
    }
  }
}

angular.module('app', [])
  .controller('MainController', MainController)
  .directive('myMenu', myMenu)
  .directive('myMenuItem', myMenuItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.js"></script>

<body ng-app="app" ng-controller="MainController">
  <ul my-menu="menu">
  </ul>
</body>

【问题讨论】：

标签： angularjs recursion angularjs-directive tree

【解决方案1】：

您需要区分文件和文件夹。只需像在示例中处理文件夹一样处理文件夹，然后分别处理文件。以下 sn-p 有效，但我建议您花一点时间思考一下为什么以及如何有效。

function MainController($scope) {
  $scope.menu = [{
      name: 'one',
      directoryList: [{
        name: 'one'
      }, {
        name: 'two'
      }],
      fileList: ['one.pdf', 'two.pdf', 'three.pdf']
    },
    {
      name: 'two',
      directoryList: [{
        name: 'one',
        directoryList: [{
          name: 'one'
        }],
        fileList: ['one.pdf', 'two.pdf', 'three.pdf', 'four.pdf']
      }]
    },
    {
      name: 'three'
    }
  ];
}

function myMenu() {
  return {
    scope: {
      myMenu: '=myMenu'
    },
    template: '<li ng-repeat="item in myMenu"><my-menu-item></my-menu-item></li>',
    link: function(scope, elem) {}
  }
}

function myMenuItem($compile) {
  return {
    template: `
    <a href ng-bind="item.name" ng-click="show($event)"></a>
    `,
    link: function(scope, element) {
      if (angular.isArray(scope.item.directoryList)) {
        element.append($compile('<ul ng-if="!collapsed" my-menu="item.directoryList"></ul>')(scope));
      }

      if (angular.isArray(scope.item.fileList)) {
        element.append($compile(`
        <ul ng-if="item.fileList && !collapsed">
          <li ng-repeat="file in item.fileList">{{file}}</li>
        </ul>
        `)(scope));
      }
      scope.collapsed = true;
      scope.show = function($event) {
        scope.collapsed = !scope.collapsed;
      }
    }
  }
}

angular.module('app', [])
  .controller('MainController', MainController)
  .directive('myMenu', myMenu)
  .directive('myMenuItem', myMenuItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.js"></script>

<body ng-app="app" ng-controller="MainController">
  <ul my-menu="menu">
  </ul>
</body>

【讨论】：

“单独处理您的文件”是我遗漏的关键点。我试图将 fileList 部分嵌套到指令中的文件夹段中......感谢您的帮助，现在一切正常。