Question

关于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": []
    }
];

Answer 1

看起来函数的名称是问题 - 更改为以下内容并且它应该起作用：

$scope.removeNode = function (scope) {         
    scope.remove();
};

我认为其他功能可能也是如此，但我没有对它们进行过测试。

Answer 2

保持ui-tree-nodes=""而不是ui-tree-nodes="options"

ui-tree-nodes充当节点的容器，这里容器options没有定义

角度UI树折叠/删除

2 个答案: