我编写了简单的pen，它具有最小的工作树视图a-la Material Design的功能。但是我不理解指令，也无法编写正确的代码来将我的模板转换为angular插件。
如何使用异步节点加载和自定义复选框（显示/隐藏）为树视图编写正确的角度指令？我现在面临的主要问题是模板递归错误。
降价
<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代码
(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));