Angular ui-tree and accept callback for restricting nodes?

Question

I'm using : https://github.com/angular-ui-tree/angular-ui-tree

I want to accept:

1. Categories to root scope of ui-tree
2. apps to the apps of same categories.

My controller is (partial):

//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) {

    }

};

My HTML is:

    <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>

I want to accept:

1. Categories to root scope of ui-tree
2. apps to the apps of same categories.

The accept callback is not getting fired. What's not right here?

Thanks!

Answer 1

If anyone is wondering how to restrict by groups, here's how I got it working. The docs leave a bit to be desired on how to do this.

here is the html markup

    <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>

for a sample item array such as

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

then in tree options, define

$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;
            }
        }
    };

That will prevent non-matching types from dropping.

Answer 2

The API of this awesome package is updated and same was not available in doc/demo.

Details : https://github.com/angular-ui-tree/angular-ui-tree/pull/281

Quick Fix :

<div ui-tree="options">

should be replaced with

<div ui-tree callbacks="options">

Update (with thanks to @zach-l)

After v2.8.0 you need to switch back to

<div ui-tree="options">

Answer 3

I would do this.

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