angularjs - 折叠 Angular-NestedSortable / angular-ui-tree 的项

Question

我们正在尝试 Angular-NestedSortable https://github.com/subvertnormality/Angular-NestedSortable（angular-ui-tree 的第 2 版看起来还不稳定，看看测试）。
我们想通过 REST 加载树结构，然后折叠根节点。
此外，我们希望在展开项目时发出额外的 REST 请求。我们遇到了问题，因为 NestedSortable 使用了很多嵌套的 Angular 作用域，而且我们不了解如何访问诸如 collapseAll() 之类的 API 方法或如何重载 toggle()。
有人可以提供一个示例小提琴或 plunkr 左右吗？
那是行不通的： $scope.list = [...]; $scope.collapseAll(); 因为collapseAll没有在外部范围内定义......

Answer 1

您可以这样做，使用您的 treeView 节点创建模板。

重要的：

1. callRestService() // 函数

2. data-collapsed="node.collapsed" // 设置真假，node. 折叠是您模型的属性

例子：

<script type="text/ng-template" id="tree_nodes.html">
    <div ui-tree-handle class="tree-node tree-node-content" ng-mouseover="showButtons=true" ng-mouseleave="showButtons=false">
        <a style="cursor:pointer;" data-nodrag ng-click="toggle(this); callRestService(this)">
            <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
        </a>
        {{node.Name}}
        <a ng-show="showButtons" class="pull-right" style="cursor:pointer;" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
        <a ng-show="showButtons" class="pull-right" style="cursor:pointer;margin-right: 8px;" data-nodrag ng-click="newSubItem(this)"><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" data-collapsed="node.collapsed" ui-tree-node ng-include="'tree_nodes.html'">
        </li>
    </ol>
</script>

<div ui-tree id="tree-root">
    <ol ui-tree-nodes="" ng-model="data">
        <li ng-repeat="node in data" ui-tree-node data-collapsed="node.collapsed" ng-include="'tree_nodes.html'"></li>
    </ol>
</div>