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

编程问答 2022-06-06

问题描述

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

解决方法

您需要区分文件和文件夹。就像对待示例中那样对待文件夹，然后分别对待文件。以下代码段有效，但我建议您花一点时间思考其原因和工作方式。

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'
        }],'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>
    `,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>