├── .gitignore
├── bower.json
├── dist
    ├── tree-view.js
    └── tree-view.min.js
├── example
    ├── index.html
    ├── script.js
    ├── style.css
    └── style.scss
├── gruntfile.js
├── package.json
├── readme.md
├── tree-view-directive.js
└── tree-view-service.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/*
2 | node_modules
3 | .plugin
4 | .metadata/*


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-ui-treeview",
 3 |   "version": "3.0.2",
 4 |   "homepage": "https://github.com/Gillardo/bootstrap-ui-treeview",
 5 |   "authors": [
 6 |     "Gillardo <darren.gillard81@gmail.com>"
 7 |   ],
 8 |   "description": "AngularJs directive to show a treeview like structure of an item. Uses the bootstrap-UI collapse directive for a nice sliding animation, also includes a TreeViewService to access the treeview from another controller/directive/service",
 9 |   "main": [
10 |     "dist/tree-view.min.js"
11 |   ],
12 |   "keywords": [
13 |     "tree-view",
14 |     "angular",
15 |     "bootstrap",
16 |     "angular-ui"
17 |   ],
18 |   "license": "MIT",
19 |   "ignore": [
20 |     "**/.*",
21 |     "node_modules",
22 |     "bower_components",
23 |     "test",
24 |     "template",
25 |     "/tree-view-directive.js",
26 |     "/tree-view-service.js",
27 |     "gruntfile.js",
28 |     "package.json",
29 |     "tests"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/dist/tree-view.js:
--------------------------------------------------------------------------------
  1 | // https://github.com/Gillardo/bootstrap-ui-treeview
  2 | // Version: 3.0.2
  3 | // Released: 2016-05-19 
  4 | angular.module('ui.bootstrap.treeview', []).factory('TreeViewService', function () {
  5 |     function TreeViewService() {
  6 |         var that = this;
  7 | 
  8 |         this.nodes = [];
  9 |         this.selectedNode = undefined;
 10 |         this.collapsed = [];
 11 | 
 12 |         // will search all nodes for this node, and expand each parent node
 13 |         this.collapseTo = function(node) {
 14 | 
 15 |             function iterate(list) {
 16 | 
 17 |                 for (var i = 0; i < list.length; i++) {
 18 |                     var found = false;
 19 | 
 20 |                     if (list[i] == node) {
 21 |                         found = true;
 22 |                     } else if (angular.isDefined(list[i].children)) {
 23 |                         found = iterate(list[i].children);
 24 |                     }
 25 | 
 26 |                     if (found == true) {
 27 |                         that.collapsed.push(list[i]);
 28 |                         return true;
 29 |                     }
 30 |                 }
 31 | 
 32 |                 return false;
 33 |             }
 34 | 
 35 |             iterate(that.nodes);
 36 |         };
 37 |     }
 38 | 
 39 |     return TreeViewService;
 40 | });
 41 | 
 42 | angular.module('ui.bootstrap.treeview').directive('treeView', ['$compile', '$templateCache', function ($compile, $templateCache) {
 43 |     return {
 44 |         restrict: 'E',
 45 |         scope: {},
 46 |         bindToController: {
 47 |             treeService: '='
 48 |         },
 49 |         controller: function () {
 50 | 
 51 |             var that = this;
 52 | 
 53 |             this.isCollapsed = function(node) {
 54 |                 return that.treeService.collapsed.indexOf(node) > -1;
 55 |             };
 56 | 
 57 |             // toggle when icon clicked
 58 |             this.toggleNode = function (node) {
 59 | 
 60 |                 if (!node.children) return;
 61 | 
 62 |                 // collapse / expand
 63 |                 if (node.children && node.children.length > 0) {
 64 |                     // add the node to our collapsed array
 65 |                     var index = that.treeService.collapsed.indexOf(node);
 66 | 
 67 |                     if (index == -1)
 68 |                         that.treeService.collapsed.push(node);
 69 |                     else
 70 |                         that.treeService.collapsed.splice(index, 1);
 71 |                 }
 72 |             };
 73 | 
 74 |             // select when name clicked
 75 |             this.selectNode = function (e, node) {
 76 |                 that.treeService.selectedNode = node;
 77 | 
 78 |                 e.stopPropagation();
 79 |                 e.preventDefault();
 80 |             };
 81 |         },
 82 |         controllerAs: 'ctrl',
 83 |         link: function (scope, element, attrs, ctrl) {
 84 |             var isRoot = (!attrs.treeRoot ? true : false);
 85 |             var nodeLabel = attrs.nodeLabel || 'label';
 86 |             var itemClass = attrs.itemClass || '';
 87 |             var itemInclude = attrs.itemNgInclude || '';
 88 |             var itemIncludeHtml = '';
 89 |             var emptyTreeMessage = attrs.emptyTreeMessage || 'No items to display';
 90 |             var emptyTreeClass = attrs.emptyTreeClass || 'alert alert-info';
 91 | 
 92 |             if (itemInclude && itemInclude.length > 0) {
 93 |                 itemIncludeHtml = $templateCache.get(attrs.itemNgInclude);
 94 |             }
 95 | 
 96 |             // remove attributes
 97 |             element.removeAttr('node-label');
 98 |             element.removeAttr('item-class');
 99 |             element.removeAttr('item-ng-include');
100 |             element.removeAttr('tree-root');
101 | 
102 |             // template
103 |             var template = '';
104 | 
105 |             if (!isRoot)
106 |                 template =  '<ul>';
107 |             else
108 |                 template = '<ul ng-if="ctrl.treeService.nodes.length">';
109 | 
110 |             template += '<li ng-repeat="node in [REPLACENODES]">' +
111 |                 '<div ng-click="ctrl.selectNode($event, node)" class="node" ng-class="{\'selected\' : node == ctrl.treeService.selectedNode}">' +
112 |                 '<div ' + (itemClass != '' ? ' class="' + itemClass + '"' : '') + '>' +
113 |                 '<i ng-click="ctrl.toggleNode(node)" ng-show="node.children && node.children.length > 0" ng-class="!ctrl.isCollapsed(node) ? \'has-child\' : \'has-child-open\'"></i>' +
114 |                 '<i ng-click="ctrl.toggleNode(node)" class="no-child" ng-show="!node.children || node.children.length == 0"></i>' +
115 |                 '<span ng-bind="node.' + nodeLabel + '" ng-class="{\'selected\' : node == ctrl.treeService.selectedNode}"></span>' +
116 |                 '</div>' +
117 |                 itemIncludeHtml +
118 |                 '</div>' +
119 |                 '<tree-view uib-collapse="!ctrl.isCollapsed(node)" tree-service="ctrl.treeService" node-children="node.children" tree-root="false" node-label="' + nodeLabel + '" item-ng-include="' + itemInclude + '" item-class="' + itemClass + '"></tree-view>' +
120 |                 '</li>' +
121 |                 '</ul>';
122 | 
123 |             if (!isRoot) {
124 |                 template = template.replace('[REPLACENODES]', '$parent.node.children');
125 |             } else {
126 |                 template = template.replace('[REPLACENODES]', 'ctrl.treeService.nodes');
127 |                 template += '<div class="' + emptyTreeClass + '" ng-show="ctrl.treeService.nodes.length == 0">' + emptyTreeMessage + '</div>';
128 |             }
129 | 
130 |             var compiledHtml = $compile(template)(scope);
131 | 
132 |             element.append(compiledHtml);
133 |         }
134 |     };
135 | }]);


--------------------------------------------------------------------------------
/dist/tree-view.min.js:
--------------------------------------------------------------------------------
1 | /*! bootstrap-ui-treeview 2016-05-19 */
2 | angular.module("ui.bootstrap.treeview",[]).factory("TreeViewService",function(){function a(){var a=this;this.nodes=[],this.selectedNode=void 0,this.collapsed=[],this.collapseTo=function(b){function c(d){for(var e=0;e<d.length;e++){var f=!1;if(d[e]==b?f=!0:angular.isDefined(d[e].children)&&(f=c(d[e].children)),1==f)return a.collapsed.push(d[e]),!0}return!1}c(a.nodes)}}return a}),angular.module("ui.bootstrap.treeview").directive("treeView",["$compile","$templateCache",function(a,b){return{restrict:"E",scope:{},bindToController:{treeService:"="},controller:function(){var a=this;this.isCollapsed=function(b){return a.treeService.collapsed.indexOf(b)>-1},this.toggleNode=function(b){if(b.children&&b.children&&b.children.length>0){var c=a.treeService.collapsed.indexOf(b);-1==c?a.treeService.collapsed.push(b):a.treeService.collapsed.splice(c,1)}},this.selectNode=function(b,c){a.treeService.selectedNode=c,b.stopPropagation(),b.preventDefault()}},controllerAs:"ctrl",link:function(c,d,e,f){var g=e.treeRoot?!1:!0,h=e.nodeLabel||"label",i=e.itemClass||"",j=e.itemNgInclude||"",k="",l=e.emptyTreeMessage||"No items to display",m=e.emptyTreeClass||"alert alert-info";j&&j.length>0&&(k=b.get(e.itemNgInclude)),d.removeAttr("node-label"),d.removeAttr("item-class"),d.removeAttr("item-ng-include"),d.removeAttr("tree-root");var n="";n=g?'<ul ng-if="ctrl.treeService.nodes.length">':"<ul>",n+='<li ng-repeat="node in [REPLACENODES]"><div ng-click="ctrl.selectNode($event, node)" class="node" ng-class="{\'selected\' : node == ctrl.treeService.selectedNode}"><div '+(""!=i?' class="'+i+'"':"")+'><i ng-click="ctrl.toggleNode(node)" ng-show="node.children && node.children.length > 0" ng-class="!ctrl.isCollapsed(node) ? \'has-child\' : \'has-child-open\'"></i><i ng-click="ctrl.toggleNode(node)" class="no-child" ng-show="!node.children || node.children.length == 0"></i><span ng-bind="node.'+h+'" ng-class="{\'selected\' : node == ctrl.treeService.selectedNode}"></span></div>'+k+'</div><tree-view uib-collapse="!ctrl.isCollapsed(node)" tree-service="ctrl.treeService" node-children="node.children" tree-root="false" node-label="'+h+'" item-ng-include="'+j+'" item-class="'+i+'"></tree-view></li></ul>',g?(n=n.replace("[REPLACENODES]","ctrl.treeService.nodes"),n+='<div class="'+m+'" ng-show="ctrl.treeService.nodes.length == 0">'+l+"</div>"):n=n.replace("[REPLACENODES]","$parent.node.children");var o=a(n)(c);d.append(o)}}}]);


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html ng-app="app" ng-controller="MyController">
 3 | <head>
 4 |     <link rel="stylesheet" href="style.css" />
 5 |     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
 6 |     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
 7 |     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
 8 |     <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
 9 |     <script src="../dist/tree-view.min.js"></script>
10 |     <script src="script.js"></script>
11 | </head>
12 | <body style="padding:10px;" class="container-fluid">
13 | <h1>Treeview Demo</h1>
14 | <hr />
15 | <p>
16 |     Use buttons to interact with treeview<br />
17 |     <a class="btn btn-default" ng-click="select()">Select First</a>
18 |     <a class="btn btn-default" ng-click="unselect()">Unselect Selected</a>
19 | </p>
20 | <br />
21 | <p>Selected node<br />
22 |     {{ myService.selectedNode }}</p><br />
23 | 
24 | <script type="text/ng-template" id="my/url/to/a/template.html">
25 |     <div class="pull-right">{{ node.name }}</div>
26 | </script>
27 | 
28 | <tree-view tree-service="myService" node-label="name" item-class="pull-left" item-ng-include="my/url/to/a/template.html"></tree-view>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/example/script.js:
--------------------------------------------------------------------------------
 1 | var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.treeview']);
 2 | 
 3 | app.controller('MyController', ['$scope', 'TreeViewService', function($scope, TreeViewService) {
 4 | 
 5 |     var service = new TreeViewService;
 6 | 
 7 |     $scope.myService = service;
 8 |     $scope.myService.nodes = [
 9 |         {
10 |             id: 1,
11 |             name: 'first',
12 |             children: []
13 |         },
14 |         {
15 |             id: 2,
16 |             name: 'second',
17 |             children: [
18 |                 {
19 |                     id: 10,
20 |                     name: 'child of second',
21 |                     children: [
22 |                         {
23 |                             id: 20,
24 |                             name: 'grand child',
25 |                             children: []
26 |                         }
27 |                     ]
28 |                 }
29 |             ]
30 |         }
31 |     ];
32 | 
33 |     $scope.select = function() {
34 |         service.selectedNode = service.nodes[0];
35 |     };
36 | 
37 |     $scope.unselect = function() {
38 |         service.selectedNode = undefined;
39 |     }
40 | }]);


--------------------------------------------------------------------------------
/example/style.css:
--------------------------------------------------------------------------------
 1 | tree-view {
 2 |     display: block;
 3 | }
 4 | 
 5 | tree-view .collapsing.in {
 6 |     overflow: visible;
 7 | }
 8 | 
 9 | tree-view ul {
10 |     padding-left: 0;
11 | }
12 | 
13 | tree-view ul li {
14 |     display: block;
15 | }
16 | 
17 | tree-view ul li .node:before, tree-view ul li .node:after {
18 |     display: table;
19 |     content: " ";
20 | }
21 | 
22 | tree-view ul li .node:after {
23 |     clear: both;
24 | }
25 | 
26 | tree-view ul li .node:hover {
27 |     background: #D8ECF6;
28 | }
29 | 
30 | tree-view ul li .node.selected {
31 |     background: #D8ECF6;
32 | }
33 | 
34 | tree-view ul li .node {
35 |     cursor: pointer;
36 |     margin-left: -15px;
37 |     margin-right: -15px;
38 |     margin: 0;
39 |     padding: .3745rem;
40 |     border-bottom: 1px solid #e4eaec;
41 | }
42 | 
43 | tree-view ul li .node div:first-child i.no-child, tree-view ul li .node div:first-child i.has-child, tree-view ul li .node div:first-child i.has-child-open {
44 |     display: inline-block;
45 |     font: normal normal normal 14px/1 FontAwesome;
46 |     font-size: inherit;
47 |     text-rendering: auto;
48 |     -webkit-font-smoothing: antialiased;
49 |     -moz-osx-font-smoothing: grayscale;
50 |     margin-right: 0.3475rem;
51 | }
52 | 
53 | tree-view ul li .node div:first-child i.no-child:before {
54 |     content: "\f114";
55 | }
56 | 
57 | tree-view ul li .node div:first-child i.has-child:before {
58 |     content: "\f07b";
59 | }
60 | 
61 | tree-view ul li .node div:first-child i.has-child-open:before {
62 |     content: "\f07c";
63 | }
64 | 
65 | tree-view ul li .node div:first-child span {
66 |     padding: .1475rem;
67 | }
68 | 
69 | tree-view ul li .node div:first-child span .selected {
70 |     background: #D8ECF6;
71 | }
72 | 
73 | tree-view tree-view {
74 |     padding-left: 1.3475rem;
75 | }
76 | 


--------------------------------------------------------------------------------
/example/style.scss:
--------------------------------------------------------------------------------
 1 | tree-view {
 2 |   display: block;
 3 | 
 4 |   .collapsing.in {
 5 |     overflow: visible;
 6 |   }
 7 | 
 8 |   ul {
 9 |     padding-left: 0;
10 | 
11 |     li {
12 |       display: block;
13 | 
14 |       .node:before, .node:after {
15 |         display: table;
16 |         content: " ";
17 |       }
18 | 
19 |       .node:after {
20 |         clear:both;
21 |       }
22 | 
23 |       .node:hover {
24 |         background: #D8ECF6;
25 |       }
26 | 
27 |       .node.selected {
28 |         background: #D8ECF6;
29 |       }
30 | 
31 |       .node {
32 | 
33 |         cursor: pointer;
34 |         margin-left: -15px;
35 |         margin-right: -15px;
36 |         margin: 0;
37 |         padding: .3745rem;
38 |         border-bottom: 1px solid #e4eaec;
39 | 
40 |         div:first-child {
41 | 
42 |           i.no-child, i.has-child, i.has-child-open {
43 |             @include fa-icon();
44 |             margin-right: 0.3475rem;
45 |           }
46 | 
47 |           i.no-child:before {
48 |             content: "\f114";
49 |           }
50 | 
51 |           i.has-child:before {
52 |             content: "\f07b";
53 |           }
54 | 
55 |           i.has-child-open:before {
56 |             content: "\f07c";
57 |           }
58 | 
59 |           span {
60 |             padding: .1475rem;
61 | 
62 |             .selected {
63 |               background: #D8ECF6;
64 |             }
65 |           }
66 |         }
67 | 
68 |       }
69 |     }
70 |   }
71 | 
72 |   // children
73 |   tree-view {
74 |     padding-left: 1.3475rem;
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/gruntfile.js:
--------------------------------------------------------------------------------
 1 | /// <vs AfterBuild='default' />
 2 | module.exports = function (grunt) {
 3 |     'use strict';
 4 |     // Project configuration
 5 |     grunt.initConfig({
 6 |         // Metadata
 7 |         pkg: grunt.file.readJSON('package.json'),
 8 |         concat: {
 9 |             options: {
10 |                 banner: '// <%= pkg.url %>\n// Version: <%= pkg.version %>\n// Released: <%= grunt.template.today("yyyy-mm-dd") %> \n'
11 |             },
12 |             app: {
13 |                 src: [
14 |                     'tree-view-service.js',
15 |                     'tree-view-directive.js',
16 |                 ],
17 |                 dest: 'dist/tree-view.js'
18 |             }
19 |         },
20 |         uglify: {
21 |             options: {
22 |                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
23 |             },
24 |             app: {
25 |                 src: 'dist/tree-view.js',
26 |                 dest: 'dist/tree-view.min.js'
27 |             }
28 |         }
29 | 
30 |     });
31 | 
32 |     // These plugins provide necessary tasks
33 |     grunt.loadNpmTasks('grunt-contrib-concat');
34 |     grunt.loadNpmTasks('grunt-contrib-uglify');
35 | 
36 | 
37 |     // Default task
38 |     grunt.registerTask('default', ['concat', 'uglify']);
39 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-ui-treeview",
 3 |   "url": "https://github.com/Gillardo/bootstrap-ui-treeview",
 4 |   "version": "3.0.2",
 5 |   "devDependencies": {
 6 |     "grunt": "^0.4.5",
 7 |     "grunt-contrib-concat": "^0.5.0",
 8 |     "grunt-contrib-jshint": "~0.10.0",
 9 |     "grunt-contrib-nodeunit": "~0.4.1",
10 |     "grunt-contrib-uglify": "^0.7.0"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Bootstrap-UI/treeview
  2 | 
  3 | AngularJs directive to show a treeview like structure of an item. Uses the bootstrap-UI collapse directive for a nice sliding animation.  This treeView has now been updated to NOT change the data in the treeView.  Some other tree view directives add different properties to the data to show the expanded/selected nodes, but this treeview will leave your data alone and uses a service to determine when a node is collapsed/selected.
  4 | 
  5 | [Demo](http://plnkr.co/edit/4M9AsK5eJVRI5BCkfA7h?p=preview)
  6 | 
  7 | ## Installation
  8 | To use the directive you must have the following angular-ui bootstrap directives included already
  9 | * Collapse
 10 | 
 11 | You should already have the ui.bootstrap dependancy included in your app.js file like below, You then need to add ui.bootstrap.treeview, as so
 12 | ```sh
 13 | angular.module('app', ['ui.bootstrap', 'ui.bootstrap.treeview']);
 14 | ```
 15 | Download the source from dist/tree-view.min.js file and include it in your project.
 16 | 
 17 | Or use bower
 18 | 
 19 | ```
 20 | bower install bootstrap-ui-treeview -S
 21 | ```
 22 | 
 23 | and link with ``` bower_components/bootstrap-ui-treeview/dist/treeview.min.js ```
 24 | 
 25 | 
 26 | ## Usage
 27 | You have the following properties available to use with the directive.  All are optional unless stated otherwise
 28 | * treeService (required) - Your treeService which contains the data to display
 29 | * nodeLabel - (string)
 30 | * itemClass - (string)
 31 | * itemNgInclude (string)
 32 | * emptyMessage (string)
 33 | * emptyClass (string)
 34 |  
 35 | ##### nodeLabel
 36 | The name of the property that you want to display for each item
 37 | ##### itemNgInclude
 38 | A string if you want to include an include for each repeated item. Each item is referenced as a node and you can reference any property within that node
 39 | ##### itemClass
 40 | A string if you want to apply a css class to each item. This is needed to format items better if you use pull-right in your itemNgInclude template, you can then use pull-left on the item
 41 | 
 42 | Each item must have a children property, this is what will contain a further list of more items.
 43 | 
 44 | #### Service
 45 | The treeService has been redeveloped so that none of the treeView data is actually changed. Previously a selected and collapsed property would be added to each node of data, this is now not the case.
 46 | The service has the following properties available.
 47 | 
 48 | #### nodes
 49 | The data that you want to display in the treeView.  This is now required.
 50 | 
 51 | #### selectedNode
 52 | The node that is currently selected
 53 | 
 54 | #### collapsed
 55 | This is an array of all the nodes that are current collapsed
 56 | 
 57 | #### collapseTo (node)
 58 | Function to expand all parent nodes in a branch until the selectedNode is found
 59 | 
 60 | ## Css
 61 | In order for you to add styles to the tree-view, each tree-view is created with a className of tree-view.  You can override any styling you want, by creating your own css.
 62 | 
 63 | If you would like to use a bootstrap dropdown (or another element that uses collapse class) within an item-ng-include template, the dropdown will be cut off when you are on the last element of the tree-view.  To get round this you need to apply the following css class rule (thanks jziolkow)
 64 | 
 65 | ```sh
 66 | tree-view.collapsing.in {
 67 |     overflow: visible;
 68 | }
 69 | ```
 70 | 
 71 | 
 72 | ## Example
 73 | Here is an example to use the directive
 74 | 
 75 | ####DATA - CONTROLLER
 76 | ```sh
 77 | app.controller('MyController', ['TreeViewService', function(TreeViewService) {
 78 |     this.myService = new TreeViewService;
 79 |     
 80 |     myService.nodes = [
 81 |         {
 82 |             id: 1,
 83 |             name: 'first',
 84 |             children: []
 85 |         },
 86 |         {
 87 |             id: 2,
 88 |             name: 'second',
 89 |             children: [
 90 |                 {
 91 |                     id: 10,
 92 |                     name: 'child of second',
 93 |                     children: [
 94 |                         {
 95 |                             id: 20,
 96 |                             name: 'grand child',
 97 |                             children: []
 98 |                         }
 99 |                     ]
100 |                 }
101 |             ]
102 |         }
103 |     ];
104 | });
105 | ```
106 | 
107 | ####HTML
108 | ```sh
109 | <script type="text/ng-template" id="my/url/to/a/template.html">
110 |     <div class="pull-right" style="background:yellow;color:red;padding:5px">{{ node.name }}</div>
111 | </script>
112 | <tree-view tree-service="ctrl.myService" node-label="name" item-class="pull-left" item-ng-include="my/url/to/a/template.html"></tree-view>
113 | ```
114 | 
115 | And you end up with a treeview like so
116 | 
117 | ![alt tag](http://imageshack.com/a/img909/2623/gn5r3S.gif)
118 | 
119 | ## Support
120 | This was developed using angular-ui bootstrap Version: 0.12.0 - 2014-11-16.  If you have a bug, please check what version of angular-ui you are using.  If you are using a version prior to this, then please upgrade if you can and try it. If the problem persists, please let me know.  I do have a day job but will try to get back to you asap.  If you can fix the bug, then let me know how, or even better, submit a pull request.


--------------------------------------------------------------------------------
/tree-view-directive.js:
--------------------------------------------------------------------------------
 1 | angular.module('ui.bootstrap.treeview').directive('treeView', ['$compile', '$templateCache', function ($compile, $templateCache) {
 2 |     return {
 3 |         restrict: 'E',
 4 |         scope: {},
 5 |         bindToController: {
 6 |             treeService: '='
 7 |         },
 8 |         controller: function () {
 9 | 
10 |             var that = this;
11 | 
12 |             this.isCollapsed = function(node) {
13 |                 return that.treeService.collapsed.indexOf(node) > -1;
14 |             };
15 | 
16 |             // toggle when icon clicked
17 |             this.toggleNode = function (node) {
18 | 
19 |                 if (!node.children) return;
20 | 
21 |                 // collapse / expand
22 |                 if (node.children && node.children.length > 0) {
23 |                     // add the node to our collapsed array
24 |                     var index = that.treeService.collapsed.indexOf(node);
25 | 
26 |                     if (index == -1)
27 |                         that.treeService.collapsed.push(node);
28 |                     else
29 |                         that.treeService.collapsed.splice(index, 1);
30 |                 }
31 |             };
32 | 
33 |             // select when name clicked
34 |             this.selectNode = function (e, node) {
35 |                 that.treeService.selectedNode = node;
36 | 
37 |                 e.stopPropagation();
38 |                 e.preventDefault();
39 |             };
40 |         },
41 |         controllerAs: 'ctrl',
42 |         link: function (scope, element, attrs, ctrl) {
43 |             var isRoot = (!attrs.treeRoot ? true : false);
44 |             var nodeLabel = attrs.nodeLabel || 'label';
45 |             var itemClass = attrs.itemClass || '';
46 |             var itemInclude = attrs.itemNgInclude || '';
47 |             var itemIncludeHtml = '';
48 |             var emptyTreeMessage = attrs.emptyTreeMessage || 'No items to display';
49 |             var emptyTreeClass = attrs.emptyTreeClass || 'alert alert-info';
50 | 
51 |             if (itemInclude && itemInclude.length > 0) {
52 |                 itemIncludeHtml = $templateCache.get(attrs.itemNgInclude);
53 |             }
54 | 
55 |             // remove attributes
56 |             element.removeAttr('node-label');
57 |             element.removeAttr('item-class');
58 |             element.removeAttr('item-ng-include');
59 |             element.removeAttr('tree-root');
60 | 
61 |             // template
62 |             var template = '';
63 | 
64 |             if (!isRoot)
65 |                 template =  '<ul>';
66 |             else
67 |                 template = '<ul ng-if="ctrl.treeService.nodes.length">';
68 | 
69 |             template += '<li ng-repeat="node in [REPLACENODES]">' +
70 |                 '<div ng-click="ctrl.selectNode($event, node)" class="node" ng-class="{\'selected\' : node == ctrl.treeService.selectedNode}">' +
71 |                 '<div ' + (itemClass != '' ? ' class="' + itemClass + '"' : '') + '>' +
72 |                 '<i ng-click="ctrl.toggleNode(node)" ng-show="node.children && node.children.length > 0" ng-class="!ctrl.isCollapsed(node) ? \'has-child\' : \'has-child-open\'"></i>' +
73 |                 '<i ng-click="ctrl.toggleNode(node)" class="no-child" ng-show="!node.children || node.children.length == 0"></i>' +
74 |                 '<span ng-bind="node.' + nodeLabel + '" ng-class="{\'selected\' : node == ctrl.treeService.selectedNode}"></span>' +
75 |                 '</div>' +
76 |                 itemIncludeHtml +
77 |                 '</div>' +
78 |                 '<tree-view uib-collapse="!ctrl.isCollapsed(node)" tree-service="ctrl.treeService" node-children="node.children" tree-root="false" node-label="' + nodeLabel + '" item-ng-include="' + itemInclude + '" item-class="' + itemClass + '"></tree-view>' +
79 |                 '</li>' +
80 |                 '</ul>';
81 | 
82 |             if (!isRoot) {
83 |                 template = template.replace('[REPLACENODES]', '$parent.node.children');
84 |             } else {
85 |                 template = template.replace('[REPLACENODES]', 'ctrl.treeService.nodes');
86 |                 template += '<div class="' + emptyTreeClass + '" ng-show="ctrl.treeService.nodes.length == 0">' + emptyTreeMessage + '</div>';
87 |             }
88 | 
89 |             var compiledHtml = $compile(template)(scope);
90 | 
91 |             element.append(compiledHtml);
92 |         }
93 |     };
94 | }]);


--------------------------------------------------------------------------------
/tree-view-service.js:
--------------------------------------------------------------------------------
 1 | angular.module('ui.bootstrap.treeview', []).factory('TreeViewService', function () {
 2 |     function TreeViewService() {
 3 |         var that = this;
 4 | 
 5 |         this.nodes = [];
 6 |         this.selectedNode = undefined;
 7 |         this.collapsed = [];
 8 | 
 9 |         // will search all nodes for this node, and expand each parent node
10 |         this.collapseTo = function(node) {
11 | 
12 |             function iterate(list) {
13 | 
14 |                 for (var i = 0; i < list.length; i++) {
15 |                     var found = false;
16 | 
17 |                     if (list[i] == node) {
18 |                         found = true;
19 |                     } else if (angular.isDefined(list[i].children)) {
20 |                         found = iterate(list[i].children);
21 |                     }
22 | 
23 |                     if (found == true) {
24 |                         that.collapsed.push(list[i]);
25 |                         return true;
26 |                     }
27 |                 }
28 | 
29 |                 return false;
30 |             }
31 | 
32 |             iterate(that.nodes);
33 |         };
34 |     }
35 | 
36 |     return TreeViewService;
37 | });
38 | 


--------------------------------------------------------------------------------