当前位置：首页 > news >正文

Angular UI Tree实战案例：构建可折叠的文件目录浏览器

news 2026/3/27 5:52:44

Angular UI Tree实战案例：构建可折叠的文件目录浏览器

【免费下载链接】angular-ui-treeA tree component for AngularJS, without jQuery as dependency.项目地址: https://gitcode.com/gh_mirrors/an/angular-ui-tree

Angular UI Tree是一款专为AngularJS打造的树形组件，无需依赖jQuery，让开发者能够轻松实现可折叠的文件目录浏览器。本文将通过实战案例，带你掌握如何利用这一强大工具快速构建交互式树形结构。

🌟 为什么选择Angular UI Tree？

Angular UI Tree作为轻量级树形组件，具有三大核心优势：

零jQuery依赖：纯AngularJS实现，避免引入额外库
丰富交互功能：支持节点拖拽、折叠/展开、嵌套结构
高度可定制：通过CSS和指令参数灵活调整样式与行为

🚀 快速开始：基础环境搭建

1️⃣ 安装与引入

首先克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/an/angular-ui-tree

在HTML文件中引入核心样式与脚本：

<link rel="stylesheet" href="source/angular-ui-tree.css"> <script src="source/main.js"></script>

2️⃣ 核心指令解析

Angular UI Tree提供了完整的指令体系，构建树形结构只需四个核心指令：

指令名称	作用
`ui-tree`	定义树形结构容器
`ui-tree-nodes`	节点列表容器
`ui-tree-node`	单个节点元素
`ui-tree-handle`	节点拖拽手柄

📁 实战案例：文件目录浏览器实现

基础树形结构模板

以下是实现可折叠文件目录的基础HTML结构：

<div ui-tree id="tree-root"> <ol ui-tree-nodes ng-model="data"> <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li> </ol> </div>

节点渲染模板

创建nodes_renderer.html实现节点的递归渲染：

<div ui-tree-handle class="tree-node tree-node-content"> <i class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}" ng-click="toggle()"></i> {{node.name}} </div> <ol ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed}"> <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li> </ol>

控制器逻辑实现

在examples/js/basic-example.js中定义树形数据与交互逻辑：

angular.module('basicExample', ['ui.tree']) .controller('BasicExampleController', ['$scope', function($scope) { $scope.data = [ { "name": "文档", "nodes": [ {"name": "简历.docx"}, {"name": "项目方案.pdf"} ] }, { "name": "图片", "nodes": [ {"name": "产品截图", "nodes": [ {"name": "首页.png"}, {"name": "详情页.png"} ]} ] } ]; $scope.toggle = function() { $scope.collapsed = !$scope.collapsed; }; }]);

💡 高级功能实现

节点拖拽功能

只需添加ui-tree指令并配置拖拽选项：

<div ui-tree id="tree-root"><li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li>

在控制器中实现过滤逻辑：

$scope.visible = function(node) { return node.name.toLowerCase().indexOf($scope.filterText.toLowerCase()) !== -1; };

🎨 样式定制

通过修改source/angular-ui-tree.css自定义节点样式：

.tree-node { padding: 5px 10px; border: 1px solid #eee; background: #f5f5f5; } .tree-node-content { cursor: pointer; } .tree-node:hover { background: #e9e9e9; }