Angular -ui-tree: remote location + event catch an event in the directive

Question

I am using angular-ui-tree to create a tree of elements in my application. I use its drag and drop function, and I need to know when and where (on which element) a reset occurs.

For example, I drag element1 and drop it onto the panel. I want the panel to display the name of the element. (each element has a name property). a panel is just a simple div with text inside.

I saw in the docs that I can access the “discarded” event in my controller. But I don’t understand how to change the contents of the panel according to the item being dragged.

Answer 1

As in the documentation $ callbacks (type: object)

$ callbacks is a very important property for angular -ui-tree. When some special events trigger, functions from $ callbacks are called. callbacks can be passed through a directive.

you define events in the treeOptions collection

     myAppModule.controller('MyController', function($scope) {
     // here you define the events in a treeOptions collection
      $scope.treeOptions = {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
          return true;
        },
        dropped: function(e) {
          console.log (e.source.nodeScope.$modelValue);     
        }
      };

    });

then in your div tree add callbacks = "treeOptions" , which you defined above in the controller

<div ui-tree callbacks="treeOptions">
  <ol ui-tree-nodes ng-model="nodes">
    <li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
  </ol>
</div>

then you can access the old parent from here

e.source.nodeScope.$parentNodeScope.$modelValue

and you can access the new parent from here

e.dest.nodesScope.$parent.$modelValue

Answer 2

Hey guys, I just found it!

$scope.treeOptions = {
            dropped: function (event) {
             //To catch the event after dragged

             //Value of model which is moving
             event.source.nodeScope.$modelValue;

             //Source Parent from where we are moving model
             event.source.nodeScope.$parentNodeScope.$modelValue;

             //Destination Parent to where we are moving model
             //Edit: Use "nodesScope" instead of "nodeScope" for dest object 
             event.dest.nodesScope.$nodeScope.$modelValue;
         }};

Hope this works for you too :)

Answer 3

"", .

$scope.elOptions = {
    dropped: function(e) {
        console.log (e.source.nodeScope.$modelValue);     
    }
};