I wrote simple pen with minimal functionality for working treeview a-la Material Design. But I not understand directives and can't write correct code for converting my templates into angular plugin.
How to write correct angular directive for treeview with async nodes loading and customizing checkboxes (show/hide)? Main problem for me now is error with templates recursion.
Markdown
<script type="text/ng-template" id="treeview.html">
<md-list-item>
<p>{{ item.title }}</p>
<md-icon class="material-icons md-secondary" ng-if="item.items" ng-click="toggleItems(item)">{{ item.expanded ? 'expand_less' : 'expand_more' }}</md-icon>
</md-list-item>
<md-list flex ng-if="item.items" ng-show="item.expanded">
<div ng-repeat="item in item.items" ng-include="'treeview.html'"></div>
</md-list>
</script>
<body layout="column" ng-cloak ng-app="app" ng-controller="MainCtrl" flex>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>TreeView emulation</h2>
</div>
</md-toolbar>
<md-content flex class="md-padding">
<md-list>
<div ng-repeat="item in items" ng-include="'treeview.html'"></div>
</md-list>
</md-content>
</body>
JS Code
(function(A) {
"use strict";
var app = A.module('app', ['ngMaterial']),
ids = 1;
function getId() {
return ids++;
}
function createItems(count) {
var i, id, items = [];
for (i = 0; i < count; i += 1) {
id = getId();
items.push({
id: id,
title: 'Item #' + id,
items: id % 4
});
}
return items;
}
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.items = createItems(6); // 6 штук хвати всем!
$scope.toggleItems = function(item) {
if (item.items) {
if (A.isArray(item.items)) {
item.expanded = !item.expanded;
} else {
item.items = createItems(Math.floor(Math.random(4)) + 3);
item.expanded = true;
}
}
};
}]);
}(this.angular));
