本文实例讲述了AngularJS递归指令实现Tree View效果的方法。分享给大家供大家参考，具体如下：
在层次数据结构展示中，树是一种极其常见的展现方式。比如系统中目录结构、企业组织结构、电子商务产品分类都是常见的树形结构数据。
这里我们采用Angular的方式来实现这类常见的tree view结构。
首先我们定义数据结构，采用以children属性来挂接子节点方式来展现树层次结构，示例如下：
[
{
"id":"1",
"pid":"0",
"name":"家用电器",
"children":[
{
"id":"4",
"p
在AngularJS中，实现Tree View效果常常涉及到递归指令的使用。这主要因为树形结构数据需要能够自我包含和扩展，而递归指令恰好能够处理这种自引用的情况。本示例将详细介绍如何通过AngularJS创建一个可扩展和交互的Tree View。
我们需要定义数据结构。在上述例子中，数据是一个JSON数组，其中每个元素代表树的一个节点。每个节点包含`id`（唯一标识符）、`pid`（父节点ID）和`name`（节点名称），并且可能有一个`children`属性，用于存储其子节点。这样的数据结构使得我们可以轻松地表示层级关系。
接下来，我们定义一个名为`treeView`的自定义指令。这个指令有以下几个关键特性：
1. `restrict: 'E'`表明这是一个元素级指令，意味着它将在HTML中作为元素使用，如`<tree-view>`。
2. `templateUrl: '/treeView.html'`指定了模板文件的位置，该模板将用于渲染整个树视图。
3. `scope`定义了指令的作用域，`treeData: '='`表示`treeData`属性是双向绑定的，允许外部数据与指令内部共享；`canChecked: '=', textField: '@', itemClicked: '&', itemCheckedChanged: '&'`分别用于处理是否显示复选框、文本字段、点击事件和选中状态改变事件的回调。
4. `itemTemplateUrl: '@'`允许自定义每个节点的模板。
在指令控制器中，我们定义了几个关键函数：
- `itemExpended`用于展开或折叠节点，通过修改`$$isExpend`属性来控制视图。
- `getItemIcon`根据节点状态返回相应的图标，如叶子节点的叶子图标，或者加减号图标表示展开/折叠。
- `isLeaf`检查节点是否为叶子节点，即没有子节点。
- `warpCallback`用于安全调用外部提供的回调函数，防止未定义回调时出错。
HTML模板部分，包括`/treeView.html`和`/treeItem.html`，是树视图的呈现核心。`treeView.html`包含一个`<ul>`元素，用`ng-repeat`遍历`treeData`，并使用`ng-include`嵌入`/treeItem.html`来递归地渲染每个节点。`treeItem.html`则负责单个节点的显示，包括节点的展开/折叠图标、复选框（如果需要的话）、文本字段以及点击事件。
`ng-if`和`ng-show`结合使用，以根据`$$isExpend`属性决定子节点是否可见。`ng-change`和`ng-click`分别处理复选框状态变化和节点点击事件，调用`warpCallback`将事件传递到外部处理。
在这个实现中，以`$$`开头的属性如`$$isChecked`和`$$isExpend`是为了确保这些私有状态不会被序列化并发送到服务器，同时在客户端用于控制视图的交互状态。这种方式保持了数据模型和服务端数据的一致性，同时不影响客户端的用户界面操作。
通过使用AngularJS的递归指令和自定义模板，我们可以构建出动态且响应式的Tree View，用于展示层级结构数据。这个示例提供了一个清晰的框架，可以根据实际需求进行扩展和定制，如添加更多交互功能、样式调整等。
