2 @license Angular Treeview version 0.1.6
3 ⓒ 2013 AHN JAE-HA http://github.com/eu81273/angular.treeview
8 angular-treeview: the treeview directive
9 tree-id : each tree's unique id.
10 tree-model : the tree model on $scope.
11 node-id : each node's id
12 node-label : each node's label
13 node-children: each node's children
16 data-angular-treeview="true"
18 data-tree-model="roleList"
20 data-node-label="roleName"
21 data-node-children="children" >
26 $scope.onSelectWeek({week: week});
29 (function ( angular ) {
32 angular.module( 'angularTreeview', [] ).directive( 'treeModel', ['$compile', function( $compile ) {
35 link: function ( scope, element, attrs ) {
38 var treeId = attrs.treeId;
41 var treeModel = attrs.treeModel;
44 var nodeId = attrs.nodeId || 'id';
47 var nodeLabel = attrs.nodeLabel || 'label';
50 var nodeChildren = attrs.nodeChildren || 'children';
53 var nodeCustomImage = attrs.nodeCustomImage || 'customImage';
58 '<li data-ng-repeat="node in ' + treeModel + '">' +
59 '<i data-ng-show="!node.leaf" ng-class="node.collapsed ? \'fa fa-chevron-right\' : \'fa fa-chevron-down\'"' +
60 ' data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
61 '<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)" ng-dblclick="' + treeId + '.dblClickNodeLabel(node)">' +
62 ' <i class="collapsed" data-ng-show="!node.leaf && node.collapsed && !node.' + nodeCustomImage + '"></i>' +
63 ' <i class="expanded" data-ng-show="!node.leaf && !node.collapsed && !node.' + nodeCustomImage + '"></i>' +
64 ' <i class="custom {{node.' + nodeCustomImage + '}}" data-ng-if="node.' + nodeCustomImage + '"></i>' +
65 ' {{node.' + nodeLabel + '}}' +
67 '<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
72 //check tree id, tree model
73 if( treeId && treeModel ) {
76 if( attrs.angularTreeview ) {
78 //create tree object if not exists
79 scope[treeId] = scope[treeId] || {};
81 //Expand (load child nodes) or collapse node
82 scope[treeId].expandNode = scope[treeId].expandNode || function( selectedNode ){
83 scope.FileSelectorCtrl.expandNode(selectedNode);
84 selectedNode.collapsed = !selectedNode.collapsed;
87 scope[treeId].selectNode = scope[treeId].selectNode || function( selectedNode ){
88 //remove highlight from previous node
89 if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) {
90 scope[treeId].currentNode.selected = undefined;
93 //set highlight to selected node
94 selectedNode.selected = 'selected';
97 scope[treeId].currentNode = selectedNode;
100 //if node head clicks,
101 scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function( selectedNode ){
102 scope[treeId].selectNode(selectedNode);
103 scope[treeId].expandNode(selectedNode);
104 scope[treeId].currentNodeHead = selectedNode;
107 //if node label clicks,
108 scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ){
109 scope[treeId].selectNode(selectedNode);
110 scope.FileSelectorCtrl.selectNode(selectedNode);
113 //if node label double clicks,
114 scope[treeId].dblClickNodeLabel = scope[treeId].dblClickNodeLabel || function( selectedNode ){
115 if (!selectedNode.leaf) {
116 scope[treeId].expandNode(selectedNode);
119 scope.FileSelectorCtrl.add();
124 //Rendering template.
125 element.html('').append( $compile( template )( scope ) );