欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-03 12:31:51
近两年当中使用angular开发过很多项目，其中也涉及到一些树形结构视图的显示，最近的在项目中封装了大量的组件，一些组件也有树形结构的展示，所以写出来总结一下。 相信...

近两年当中使用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方法，即可修复上面的问题。

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

上一篇： 五花肉莴笋的做法大全现在有，喜欢吃的人们赶紧来学学！

下一篇： php简单日历函数

推荐阅读