Angular中实现树形结构视图实例代码

2024-12-01 05:41:50

近两年当中使用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'
          }
        ]
      },
      {
        name: 'front-end',
        children: [
          {
            name: 'jQuery'
          },
          {
            name: 'Angular'
          },
          {
            name: 'React'
          }
        ]
      }
    ]
  }
 })
 .directive("folderTree", function() {
  return {
    restrict: "E",
    scope: {
      currentFolder: '='
    },
    templateUrl: 'template/tree.html'
  };
 });

如上所述，在控制器中我们在$scope中绑定了一个folder的数据对象，包含整个的目录结构数据，接着定义了folderTree指令，它会使用tree.html作为模板进行视图渲染，我们这就来look look模板中的内容：

<p>{{currentFolder.name}}</p>
<ul>
  <li ng-repeat="subfolder in currentFolder.children">
    <folder-tree current-folder="subfolder"></folder-tree>
  </li>
</ul>

可以看到，在模板中有个很重要的环节，那就是使用ng-repeat指令遍历当前目录的子集，然后再次使用folder-tree组件来渲染相应的子目录，这种方式简直是完美，现在我们来看看渲染的结果：

这种在模板中嵌套使用指令的方法很完美，只可惜低版本的Angular中是无法实现的，会出现无限递归循环，造成页面假死，这是Angular本身的解析机制造成的。经测试，Angular 1.5.0及以上版本是没有问题的，但在Angular 1.4.9及以下版本中就会运行失败。假如你在项目中真的使用了低版本的Angular并且造成运行失败，我们还可以稍微改动一下模板，采用ng-include来实现同样的功能：

<p>{{currentFolder.name}}</p>
<ul>
  <li ng-repeat="subfolder in currentFolder.children"
    ng-include="'template/tree.html'"
    ng-init="currentFolder = subfolder">
  </li>
</ul>

我们在模板中去掉了folder-tree指令，使用了ng-include指令，再次将tree.html模板引入进来，需要注意的是，因为ng-include会创建一个独立的作用域，为了让其正确的引用到currentFolder变量，我们需要在每个ng-include中初始化currentFolder，将其赋值为ng-repeat中的当前subfolder，另外，别忘了ng-include指令中模板路径前后加上单引号。

这样确实可以，但是你可能觉得有些遗憾，没能使用最好的解决方案来实现这个树结构。

其实这个问题早就有人吐槽了，令人惊喜的是，有个叫Mark的伙计写了一个service专门解决这个问题：

/*
 * An Angular service which helps with creating recursive directives.
 * @author Mark Lagendijk
 * @license MIT
 */
angular.module('RecursionHelper', []).factory('RecursionHelper', ['$compile', function($compile){
  return {
    /**
     * Manually compiles the element, fixing the recursion loop.
     * @param element
     * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
     * @returns An object containing the linking functions.
     */
    compile: function(element, link){
      // Normalize the link parameter
      // 如果link参数是对象类型link:{pre: function(...){}, post: function(...){}}则不做处理
      // 如果link参数是函数类型则将其作为post-link函数在$compile之后调用
      if(angular.isFunction(link)){
        link = { post: link };
      } 

      // Break the recursion loop by removing the contents
      // 获取并清空当前元素的内容，后面进行编译
      var contents = element.contents().remove();
      var compiledContents; 

      return {
        pre: (link && link.pre) ? link.pre : null,
        /**
         * Compiles and re-adds the contents
         * 编译和重新添加内容到当前元素
         */
        post: function(scope, element){
          // Compile the contents
          if(!compiledContents){
            compiledContents = $compile(contents);
          }
          // Re-add the compiled contents to the element
          compiledContents(scope, function(clone){
            element.append(clone);
          }); 

          // Call the post-linking function, if any
          if(link && link.post){
            link.post.apply(null, arguments);
          }
        }
      };
    }
  };
}]);

现在我们只需引入这个模块，然后在directive中使用RecursionHelper这个service，调用其compile手动编译指令对应的元素节点：

angular.module('treeDemo', ['RecursionHelper'])
 .controller("TreeController", function($scope) {
  $scope.folder = {
    name: 'techs',
    children: [
      {
        name: 'server-side',
        children: [
          {
            name: 'Java'
          },
          {
            name: 'Python'
          },
          {
            name: 'Node'
          }
        ]
      },
      {
        name: 'front-end',
        children: [
          {
            name: 'jQuery'
          },
          {
            name: 'Angular'
          },
          {
            name: 'React'
          }
        ]
      }
    ]
  }
 })
 .directive("folderTree", function(RecursionHelper) {
  return {
    restrict: "E",
    scope: {
      currentFolder: '='
    },
    templateUrl: 'template/tree.html',
    compile: function(element) {
      // 我们这里使用RecursionHelper的compile方法编译指令当前元素，这里第二个参数指定一个函数，相当于常用的link函数
      // 当然我们也可以指定一个对象，里面包含pre和post函数，分别对应pre-link和post-link
      return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn){
        // Define your normal link function here.
        // Alternative: instead of passing a function,
        // you can also pass an object with
        // a 'pre'- and 'post'-link function. 

        // 这里可以往scope中绑定一些变量
        scope.variable = 'hello world';
      });
    }
  };
 });

在上面代码中，我们在创建treeDemo模块时引入RecursionHelper模块，然后在创建folderTree指令时使用RecursionHelper服务，并且在compile方法中调用RecursionHelper的compile方法，即可修复上面的问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJS实现树形结构(ztree)菜单示例代码

树形结构树形结构有多种形式和实现方式,zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单.zTree是一个依靠jQuery实现的多功能"树插件".它最大的优点是配置灵活,只要id与pid的值相同就可形成一个简单的父子结构.再加上免费开源,使用zTree的人越来越多. 效果图如下首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码,想了很久才想出用下面的代码来实现左侧菜单树形结构要实现上面的功能你需要操作如下步骤: 在HTML标签内添加ng-a
Angular中实现树形结构视图实例代码

近两年当中使用Angular开发过很多项目,其中也涉及到一些树形结构视图的显示,最近的在项目中封装了大量的组件,一些组件也有树形结构的展示,所以写出来总结一下. 相信大家都知道,树结构最典型的例子就是目录结构了吧,一个目录可以包含很多子目录,子目录又可以包含若干个子孙目录,那咱们今天就以目录结构为例来说明一下Angular中树结构的实现. 首先,我们希望封装一个组件,用于显示整个目录的树形机构,代码如下: <!DOCTYPE html> <html ng-app="treeDe
Java创建树形结构算法实例代码

在JavaWeb的相关开发中经常会涉及到多级菜单的展示,为了方便菜单的管理需要使用数据库进行支持,本例采用相关算法讲数据库中的条形记录进行相关组装和排序讲菜单组装成树形结构. 首先是需要的JavaBean import java.io.Serializable; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.Date; import j
Angular 实现输入框中显示文章标签的实例代码

很多网站发帖的时候标签输入框看起来像是在 <input> 元素中直接显示标签. 比如这种一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <
Android 绘制多级树形选择列表实例代码

一.概述前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等.另外需要加上展开与回收部门详情.关闭部分已开展的布局.勾选等功能. 效果图如下: 二.思路分析毫无疑问,对于这种数据可能达到几千几万行的列表视图,我们需要选择recyclerview等具有回收item功能的控件,因此Item的状态保持放在Model中而不是View中. 由于原始数据是树形结构的,我们需要先将树形结构转换为列表数据,类似根结点 -
jQuery 利用ztree实现树形表格的实例代码

最近公司的项目中要做一个树形表格,因为之前一直在用ztree实现基本的树形结构,理所当然的首先想到利用ztree来做. 网上找了一下别人做的树形表格,有使用ztree的,也有使用treeTable的,但效果都不太好,于是参考使用ztree的做法自己做了一个,贴出来供大家参考,请看注释说明,效果如下所示. <!DOCTYPE HTML> <html> <head> <link href="https://cdn.bootcss.com/zTree.v3/3
vue递归组件实战之简单树形控件实例代码

1.递归组件-简单树形控件预览及问题在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"> <div class="expand-
Linux 中的 Openssl命令及实例代码

openssl命令的格式是"openssl command command-options args",command部分有很多种命令,这些命令需要依赖于openssl命令才能执行,所以称为伪命令(pseudo-command),每个伪命令都有各自的功能,大部分command都可以直接man command查看命令的用法和功能. OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用.在Ope
Angular.js 实现数字转换汉字实例代码

AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my
SpringMVC中使用Thymeleaf模板引擎实例代码

本文研究的主要是SpringMVC中使用Thymeleaf模板引擎的相关内容,具体介绍如下. Thymeleaf提供了一组Spring集成,允许您将其用作Spring MVC应用程序中全面替代JSP的功能. Maven依赖  <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifa
在Vue项目中使用d3.js的实例代码

之前写一个 Demo里面有些东西要使用d3实现一些效果但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说可以说是很不人性化了完全没有说在webpack上怎么使用D3.js 最后折腾很久看到某位外国大佬看他的案例成功的实现了在Vue项目里面实现D3的使用首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

Angular中实现树形结构视图实例代码

相关推荐

随机推荐