Search code examples
javascripthtmlangularjsangular-ui-tree

Angular ui-tree and accept callback for restricting nodes?

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.

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:

  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!

Solution

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