javascript - Angular ui-tree 并接受回调以限制节点？

Question

我正在使用：https ://github.com/angular-ui-tree/angular-ui-tree

我想接受：

1. 类别到 ui-tree 的根范围
2. 应用到相同类别的应用。

我的控制器是（部分）：

//Accept Categories at root scope and accept apps only inside same category

$scope.options = {

    accept: function(sourceNodeScope, destNodesScope, destIndex) {
        //todo check nodes and return
        alert('called');
        $log.debug("sourceNodeScope");
        $log.debug(sourceNodeScope);
        $log.debug("destNodesScope");
        $log.debug(destNodesScope);
        return false;
    },
    dropped: function(event) {

    },
    beforeDrop: function(event) {

    }

};

我的 HTML 是：

    <div ng-controller="CpoTreeViewCtrl">

    <div>

<script type="text/ng-template" id="apps_renderer.html">
  <div ui-tree-handle>
    {{app.name}}
  </div>
</script>

<script type="text/ng-template" id="category_renderer.html">
  <div ui-tree-handle >
    {{category.name}}
  </div>
  <ol ui-tree-nodes ng-model="category.apps">
    <li ng-repeat="app in category.apps" ui-tree-node ng-include="'apps_renderer.html'">
    </li>
  </ol>
</script>

<div ui-tree="options">
  <ol ui-tree-nodes ng-model="treeData" id="tree-root">
    <li ng-repeat="category in treeData" ui-tree-node ng-include="'category_renderer.html'"></li>
  </ol>
</div>

</div>

</div>

我想接受：

1. 类别到 ui-tree 的根范围
2. 应用到相同类别的应用。

接受回调没有被触发。什么不在这里？

谢谢！

Answer 1

如果有人想知道如何按组进行限制，这就是我的工作方式。文档对如何执行此操作有一些不足之处。

这是html标记

    <div ng-repeat="list in lists" >
    <div ui-tree="treeOptions" class="col-xs-6" >
        <ol ui-tree-nodes ng-model="list.categories" data-type="{{list.type}}">
            <li ng-repeat="item in list.categories" ui-tree-node data-type="{{item.type}}">
                <div ui-tree-handle class="tree-node">
                    <div class="tree-node-content">
                        {{item.name}}
                    </div>
                </div>
            </li>
        </ol>
    </div>
    <div class="clearfix" ng-if="::$index===1"></div>
</div>

对于示例项目数组，例如

$scope.lists = [{
    "name": "Selected Charts",
    "type": "charts",
    "categories": [{
        "name": "222 docs",
        "type": "charts"
    }]
}, {
    "name": "sdf",
    "type": "tables",
    "categories": [{
        "name": "2222 docs",
        "type": "tables"
    }]
}];

然后在树选项中，定义

$scope.treeOptions = {
       accept: function(sourceNodeScope, destNodesScope, destIndex) {
            var srctype = sourceNodeScope.$element.attr('data-type');
            var dsttype = destNodesScope.$element.attr('data-type');
            if(srctype===dsttype){
                return true;
            }else{
                return false;
            }
        }
    };

这将防止不匹配的类型被丢弃。

Answer 2

这个很棒的包的 API 已经更新，但在 doc/demo 中没有。

详情：https ://github.com/angular-ui-tree/angular-ui-tree/pull/281

快速解决 ：

<div ui-tree="options">

应该替换为

<div ui-tree callbacks="options">

更新（感谢@zach-l）

v2.8.0之后需要切换回

<div ui-tree="options">

Answer 3

我会这样做。

accept: function(sourceNodeScope, destNodesScope) {
 return sourceNodeScope.$parent.$id === destNodesScope.$id;
}