angular.treeview.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /*
  2. @license Angular Treeview version 0.1.6
  3. ⓒ 2013 AHN JAE-HA http://github.com/eu81273/angular.treeview
  4. License: MIT
  5. [TREE attribute]
  6. angular-treeview: the treeview directive
  7. tree-id : each tree's unique id.
  8. tree-model : the tree model on $scope.
  9. node-id : each node's id
  10. node-label : each node's label
  11. node-children: each node's children
  12. <div
  13. data-angular-treeview="true"
  14. data-tree-id="tree"
  15. data-tree-model="roleList"
  16. data-node-id="roleId"
  17. data-node-label="roleName"
  18. data-node-children="children" >
  19. </div>
  20. */
  21. (function ( angular ) {
  22. 'use strict';
  23. angular.module( 'angularTreeview', [] ).directive( 'treeModel', ['$compile', function( $compile ) {
  24. return {
  25. restrict: 'A',
  26. link: function ( scope, element, attrs ) {
  27. //tree id
  28. var treeId = attrs.treeId;
  29. //tree model
  30. var treeModel = attrs.treeModel;
  31. //node id
  32. var nodeId = attrs.nodeId || 'id';
  33. //node label
  34. var nodeLabel = attrs.nodeLabel || 'label';
  35. //children
  36. var nodeChildren = attrs.nodeChildren || 'children';
  37. //tree template
  38. var template =
  39. '<ul>' +
  40. '<li data-ng-repeat="node in ' + treeModel + '"' + '>' +
  41. '<i class="collapsed" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
  42. '<i class="expanded" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
  43. '<i class="normal" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
  44. '<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
  45. '<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>' +
  46. '</li>' +
  47. '</ul>';
  48. //check tree id, tree model
  49. if( treeId && treeModel ) {
  50. //root node
  51. if( attrs.angularTreeview ) {
  52. //create tree object if not exists
  53. scope[treeId] = scope[treeId] || {};
  54. //if node head clicks,
  55. scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function( selectedNode ){
  56. //Collapse or Expand
  57. selectedNode.collapsed = !selectedNode.collapsed;
  58. };
  59. //if node label clicks,
  60. scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ){
  61. //remove highlight from previous node
  62. if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) {
  63. scope[treeId].currentNode.selected = undefined;
  64. }
  65. //set highlight to selected node
  66. selectedNode.selected = 'selected';
  67. //set currentNode
  68. scope[treeId].currentNode = selectedNode;
  69. //Collapse or Expand
  70. selectedNode.collapsed = !selectedNode.collapsed;
  71. };
  72. }
  73. //Rendering template.
  74. element.html('').append( $compile( template )( scope ) );
  75. }
  76. }
  77. };
  78. }]);
  79. })( angular );