Angular中实现树形结构视图

最新推荐文章于 2024-08-16 08:32:15 发布

liuhe688

最新推荐文章于 2024-08-16 08:32:15 发布

阅读量2.6w

点赞数 1

分类专栏： Front End

本文链接：https://blog.csdn.net/liuhe688/article/details/50966215

版权

本文介绍了在Angular项目中如何封装一个组件来显示树形结构，以目录结构为例，探讨了在不同Angular版本中可能出现的问题及其解决方案。文章提到了低版本Angular可能会导致无限递归导致页面假死，并给出了使用ng-include的替代方案。最后，介绍了一个名为RecursionHelper的service，它能有效解决低版本Angular中的递归问题。

摘要由CSDN通过智能技术生成

近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构视图的显示，最近的在项目中封装了大量的组件，一些组件也有树形结构的展示，所以写出来总结一下。

相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下Angular中树结构的实现。

首先，我们希望封装一个组件，用于显示整个目录的树形机构，代码如下：

<!DOCTYPE html>
<html ng-app="treeDemo">
  <body>
    <div ng-controller="TreeController">
        <folder-tree current-folder="folder"></folder-tree>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

就像上面的代码一样，我们直接声明folder-tree标签，将controller中的folder数据作为参数传递进去，预期会显示出一个完整的树状目录结构。接下来我们就来定义模块，控制器，以及相应的指令部分：

angular.module('treeDemo', [])
  .controller("TreeController", function($scope) {
    $scope.folder = {
        name: 'techs',
        children: [
            {
                name: 'server-side',
                children: [
                    {
                        name: 'Java'
                    },
                    {
                        name: 'Python'
                    },
                    {
                        name: 'Node'
                    }
                ]
            },
            {