本文實例講述了AngularJS遞歸指令實作Tree View效果的方法。分享給大家供大家參考，具體如下：
在層次資料結構展示中，樹是極為常見的展現方式。例如係統中目錄結構、企業組織結構、電子商務產品分類都是常見的樹狀結構資料。
這裡我們採用Angular的方式來實作這類常見的tree view結構。
首先我們定義資料結構，採用以children屬性來掛接子節點方式來展現樹層次結構，示例如下：
[
{
"id":"1",
"pid":"0",
"name":"家用电器",
"children":[
{
"id":"4",
"pid":"1",
"name":"大家电"
}
]
},
{
...
}
...
]
則我們對於Javang way的tree view可以實現為：
則我們對於Javang way的tree view可以實現為：則我們對於Javang way的tree view可以實現為：
則我們對於Javang way的tree view可以實現為：則我們對於Javang way的tree view可以實現為：
則我們對於Javang way的tree view可以實現為：則我們對於Javang way的tree view:
angular.module('ng.demo', [])
.directive('treeView',[function(){
return {
restrict: 'E',
templateUrl: '/treeView.html',
scope: {
treeData: '=',
canChecked: '=',
textField: '@',
itemClicked: '&',
itemCheckedChanged: '&',
itemTemplateUrl: '@'
},
controller:['$scope', function($scope){
$scope.itemExpended = function(item, $event){
item.$$isExpend = ! item.$$isExpend;
$event.stopPropagation();
};
$scope.getItemIcon = function(item){
var isLeaf = $scope.isLeaf(item);
if(isLeaf){
return 'fa fa-leaf';
}
return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';
};
$scope.isLeaf = function(item){
return !item.children || !item.children.length;
};
$scope.warpCallback = function(callback, item, $event){
($scope[callback] || angular.noop)({
$item:item,
$event:$event
});
};
}]
};
}]);
HTML:
🎜樹內容主題 HTML：/treeView.html🎜
