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

Question

我一直在尝试更新此指令以将 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>

Answer 1

您需要区分文件和文件夹。就像在示例中一样对待文件夹，并分别对待文件。以下代码片段有效，但我建议您花点时间思考它为何有效以及如何有效。

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>

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

Angular recursive directive to represent tree structure needs adding file list

tree

recursion

angularjs

angularjs-directive