具有角用户界面树的角材料虚拟滚动给出了误差
具有角用户界面树的角材料虚拟滚动给出了误差
提问于 2015-11-02 06:16:16
我试图在角用户界面树上实现角质材料的虚拟卷轴。但是它给出了以下错误：
控制器'uiTree'，指令'uiTreeNode‘所要求的，找不到！
对于柱塞，单击这里。
便于参考的代码如下：
<!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': []
}]
}];
});回答 1
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33471748
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号