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


Posted in Javascript onMay 05, 2017

近两年当中使用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本身的解析机制造成的。经测试,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方法,即可修复上面的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
javascript白色简洁计算器
May 04 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
详解Vue之计算属性
Jun 20 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 #Javascript
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 #Javascript
js实现倒计时关键代码
May 05 #Javascript
javascript 中的继承实例详解
May 05 #Javascript
JavaScript函数表达式详解及实例
May 05 #Javascript
Node.js中的http请求客户端示例(request client)
May 04 #Javascript
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
最新远光软件笔试题面试题内容
2013/11/08 面试题
历史系毕业生自荐信
2013/10/28 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
工作疏忽检讨书
2014/01/25 职场文书
致百米运动员广播稿
2014/01/29 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
学校教学管理制度
2015/08/06 职场文书
教务处干事工作总结
2015/08/14 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python