<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.14.0/angular-ui-tree.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.14.0/angular-ui-tree.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/html" src="folderTree.html"></script>
</head>
<body ng-controller="MyCtrl">
<folder-tree folders="folders"></folder-tree>
</body>
</html>
var app = angular.module('myApp', ['ui.tree']);
app.directive('folderTree', function() {
return {
restrict: 'E',
scope: {
folders: '=',
selected: '='
},
templateUrl: 'folderTree.html',
controller: ['$scope', function($scope) {
$scope.selectedFolder = {};
$scope.selectFolder = function(folder) {
$scope.selectedFolder.backgroundColor = 'inherit';
folder.backgroundColor = '#ddd';
$scope.selectedFolder = folder;
};
$scope.getStyle = function(folder) {
if(folder.isSelected) {
return '{background-color: #ddd !important;}';
}
}
}]
}
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.folders = [{
'id': 1,
'title': 'folder1',
'folders': [
{
'id': 11,
'title': 'folder1.1',
'folders': [
{
'id': 111,
'title': 'folder1.1.1',
'folders': []
}
]
},
{
'id': 12,
'title': 'folder1.2',
'folders': []
}
]
}, {
'id': 2,
'title': 'folder2',
'folders': [
{
'id': 21,
'title': 'folder2.1',
'folders': []
},
{
'id': 22,
'title': 'folder2.2',
'folders': []
}
]
}, {
'id': 3,
'title': 'folder3',
'folders': [
{
'id': 31,
'title': 'folder3.1',
'folders': []
}
]
}];
}]);
<script type="text/ng-template" id="nodes_renderer.html">
<div ng-style="{'background-color': folder.backgroundColor}" ui-tree-handle class="tree-node tree-node-content">
<a ng-if="folder.folders && folder.folders.length > 0" class="btn btn-xs" data-nodrag ng-click="toggle(this)">
<span
class="glyphicon"
ng-class="{
'glyphicon-folder-close': collapsed,
'glyphicon-folder-open': !collapsed
}"></span>
</a>
<span ng-click="selectFolder(folder)">{{folder.title}}</span>
</div>
<ol ui-tree-nodes="" ng-model="folder.folders" ng-class="{hidden: collapsed}">
<li ng-repeat="folder in folder.folders" collapsed="true;" data-collapsed="true" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</script>
<div ui-tree data-drag-enabled="false" id="tree-root">
<ol ui-tree-nodes ng-model="folders">
<li ng-repeat="folder in folders" ui-tree-node collapsed="true;" data-collapsed="true" ng-include="'nodes_renderer.html'">{{folder.title}}</li>
</ol>
</div>