angular-ui-tree:丢弃的位置+在指令中捕获丢弃的事件

Question

我正在使用angular-ui-tree在我的应用程序中构建一个项目树。我正在使用它的拖放功能，我需要知道拖放发生的时间和地点(在哪个元素上)。

例如，我拖动item1，并将其放到面板上。我希望面板显示项目名称。(每个项目都有一个name属性)。这个面板只是一个简单的div，里面有文本。

我在文档中看到，我可以访问控制器中的"dropped“事件。但我不明白如何根据拖放的项目来更改面板内容。

Answer 1

与documentations $callbacks一样(类型: Object)

$callbacks是angular-ui-tree的一个非常重要的属性。当一些特殊事件触发时，调用$callbacks中的函数。回调可以通过指令传递。

在treeOptions集合中定义事件

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

    });

然后在树型div中添加上面在控制器中定义的callbacks="treeOptions"

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

然后，您可以从此处访问旧的父级

e.source.nodeScope.$parentNodeScope.$modelValue

您可以从此处访问新的父级

e.dest.nodesScope.$parent.$modelValue

Answer 2

嘿，伙计们，我刚找到了！

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

希望它也适用于您：)

Answer 3

您可以像这样访问"dropped“项。

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