0
Я пытаюсь реализовать виртуальный свиток углового материала на angular-ui-tree. Но ее давая следующее сообщение об ошибке: «» uiTreeугловой материал виртуальный свиток с угловым ui-деревом дает ошибку
Контроллер, требуемую в соответствии с директивой «uiTreeNode», не может быть найден!
Для плунжера нажмите here.
Код для легкой ссылки выглядит следующим образом:
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': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}, {
'id': 3,
'title': 'node3',
'nodes': [{
'id': 31,
'title': 'node3.1',
'nodes': []
}]
}];
});