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:

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

enter image description here

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:

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

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

Thanks!

ragefuljoe · Accepted Answer · 2015-05-15 03:01:06Z

10

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.

edited May 15, 2015 at 3:01

answered May 14, 2015 at 21:04

ragefuljoe

2462 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diosney Over a year ago

What about to use sourceNodeScope.$modelValue.type and the related on the destNodesScope instead of relying on custom data attributes? that way you only have to set the checks in the accept method.

2 revs · Accepted Answer · 2015-08-08 06:41:08Z

5

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

edited Aug 8, 2015 at 6:41

community wiki

2 revs
prady00

2 Comments

Zach Lysobey Over a year ago

I think that this is no longer true. I had to switch back to ui-tree="options" to make mine work (v2.8.0)

prady00 Over a year ago

@ZachL thanks for sharing this... let me update the answer

MinDK · Accepted Answer · 2015-10-28 22:24:34Z

4

I would do this.

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

answered Oct 28, 2015 at 22:24

MinDK

535 bronze badges

1 Comment

rtn Over a year ago

I like this way of doing it. A lot more efficient if you want to just limit the drops with the parent.

Collectives™ on Stack Overflow

Angular ui-tree and accept callback for restricting nodes?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related