关于Angular UI Tree入门的简单问题。我正在使用他们的github帐户的演示代码,但当我将该代码复制到我的控制器和html时,崩溃和删除功能不起作用。看起来它只是设置一个循环调用来切换?在显示数据时,我的html中的树显示正常,但切换/折叠没有任何作用。
<script type="text/ng-template" id="items_renderer.html">
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
<li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'">
</li>
</ol>
并在控制器上:
$scope.selectedItem = {};
$scope.options = {
};
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
nodeData.items.push({
id: nodeData.id * 10 + nodeData.items.length,
title: nodeData.title + '.' + (nodeData.items.length + 1),
items: []
});
};
$scope.list = [
{
"id": 1,
"title": "1. dragon-breath",
"items": [
{
"id": 10,
"title": "1. dragon-breath.1",
"items": []
}
]
},
{
"id": 2,
"title": "2. moiré-vision",
"items": [
{
"id": 21,
"title": "2.1. tofu-animation",
"items": [
{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
},
{
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}
]
},
{
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}
]
},
{
"id": 3,
"title": "3. unicorn-zapper",
"items": []
},
{
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}
];
答案 0 :(得分:5)
看起来函数的名称是问题 - 更改为以下内容并且它应该起作用:
$scope.removeNode = function (scope) {
scope.remove();
};
我认为其他功能可能也是如此,但我没有对它们进行过测试。
答案 1 :(得分:1)
保持ui-tree-nodes=""
而不是ui-tree-nodes="options"
ui-tree-nodes
充当节点的容器,这里容器options
没有定义