本文实例讲述了AngularJS递归指令实现树形视图效果的方法。分享给大家供大家参考，具体如下：

在层次数据结构展示中，树是一种极其常见的展现方式。比如系统中目录结构、企业组织结构、电子商务产品分类都是常见的树形结构数据。

这里我们采用有角的的方式来实现这类常见的树形视图结构。

首先我们定义数据结构，采用以孩子们属性来挂接子节点方式来展现树层次结构，示例如下：

[ { 'id':'1 '，' pid':'0 '，' name': '家用电器，' children':[ { 'id':'4 '，' pid':'1 '，name': '大家电' } ] }, { .} .]则我们对于尼日利亚方式的树形视图可以实现为：

JavaScript:

angular.module('ng.demo '，[]).指令(' treeView '，[function(){ return { restrict : ' E '、模板URLs : '/treeView。html '、scope: { treeData: '='、canChecked: '='、textField: '@ '、itemClicked: ' '、itemCheckedChanged: ' '、itemTemplateUrl: ' @ ' }、控制器3:[' $ scope '、函数($ scope)$ $ iseexpend=！项目$ isExpend$事件。stopperpagation()；};$ scope。getitemicon=函数(项){ var IsLaf=$ scope。IsLaf(项目)；if(ISLAF){ return ' fa fa-leaf '；}退货$$isExpend？fa fa-减： ' fa fa-加；};$ scope.isLeaf=函数（项){返回！item.children ||！项目。孩子们。长度；};$scope.warpCallback=function(回调，item，$ event){($ scope[回调]| |棱角分明。noop)({ $ item : item，$ event : $ event })；};}] };}]);HTML:

树内容主题HTML: /treeView.html

ul class='树形视图' Li ng-repeat='树形数据' ng中的项目-include=' '/TreeItem。html ' '/Li/ul每个项目节点的HTML:/treeItem.html

I ng-click=' ItemExtended(item，$ event)；'输入类型='复选框' ng-model='项目.$ $ isChecked ' class=' check-box ' ng-if=' canChecked ' ng-change=' warpCallback '(项目已选中已更改，项目，$ event)' span class=' text-field ' ng-click=' warpCallback '(项目已单击，项目，$ event)；'/spanul ng-if='！isLeaf(项目)" ng-show="项目$ $ isExpend ' Li ng-repeat='项中的项。children ' ng-include=' '/TreeItem。html ' '/Li/ul这里的技巧在于利用ng-包括来加载子节点和数据，以及利用一个warpCallback方法来转接函数外部回调函数，利用angular.noop的空对象模式来避免未注册的回调场景。对于视角交互的数据隔离采用了直接封装在元数据对象的方式，但它们都以$$开头，如$$isChecked、$ $ isExpend。在有角的程序中以$$开头的对象会被认为是内部的私有变量，在angular.toJson的时候，它们并不会被序列化，所以利用$http发回服务端更新的时候，它们并不会影响服务端传送的数据。同时，在客户端，我们也能利用对象的这些$$属性来控制视角的状态，如项目$$isChecked .来默认选中某一节点。

我们就可以如下方式来使用这个树形视图：复制代码代码如下：树视图-数据='demo.tree '文本-字段='name '值-字段='id '项-单击='demo.itemClicked($item)'项-选中-更改='演示。已检查的项目已更改($ item)可-选中=' true '/树视图效果如下：

希望本文所述对大家AngularJS程序设计有所帮助。