Trying to incorporate Angular material's virtual scroll feature on angular-ui-tree is proving to be a bit challenging. The error message that keeps popping up is:
Controller 'uiTree', which is required by directive 'uiTreeNode', cannot be located!
For the plunker example, visit here.
Here's the code for easy reference:
HTML
<!doctype html>
<html ng-app="RtmFrame">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc2/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.10.0/angular-ui-tree.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.10.0/angular-ui-tree.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc2/angular-material.css">
<script src="script.js"></script>
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content">
{{node.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag>
<span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node>
<div ng-include="'nodes_renderer.html'"></div>
</li>
</ol>
</script>
</head>
<body>
<div ng-controller="Ctrl" style="overflow-y:hidden">
<div ui-tree id="tree-root">
<md-virtual-repeat-container style="height:200px;overflow-y:auto;width:300px;margin-top:200px">
<ol ui-tree-nodes ng-model="data">
<li md-virtual-repeat="node in data" ui-tree-node>
<div ng-include="'nodes_renderer.html'"></div>
</li>
</ol>
</md-virtual-repeat-container>
</div>
</div>
</body>
</html>
JS
var RtmFrame = angular.module('RtmFrame', ['ngMaterial', 'ui.tree' ]);
RtmFrame.controller('Ctrl', function($scope) {
$scope.test = "tester";
$scope.data = [{
'id': 1,
'title': 'node1',
'nodes': [{
'id': 11,
'title': 'node1.1',
'nodes': [{
'id': 111,
'title': 'node1.1.1',
'nodes': []
}]
}, {
'id': 12,
'title': 'node1.2',
'nodes': []
}]
}, {
'id': 2,
'title': 'node2',
'nodrop': true, // An arbitrary property to check in custom template for nodrop-enabled
'nodes': [{
'id': 21,
'title': 'node2.1',
'nodes': []
}, {
'id': 22,
'title': 'node2.2',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [
... // Multiple repetitions of similar nodes are defined here
}];
});