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中没有这个API.

详细信息: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">