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 innerText和innerHtml应用
Jan 28 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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制作图型计数器的例子
2006/10/09 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
python简单实现计算过期时间的方法
2015/06/09 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
2015应届毕业生求职信范文
2015/03/20 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书