angularjs - angular-ui-tree：放置位置 + 在指令中捕获放置事件

Question

我正在使用angular-ui-tree在我的应用程序中构建项目树。我正在使用它的拖放功能，我需要知道拖放发生的时间和位置（在什么元素上）。

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

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

Answer 1

如文档中的 $callbacks （类型：对象）

$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

您可以像这样访问“丢弃”的项目。

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

Answer 4

可以在项目的这个问题上找到可能有用的其他信息：https ://github.com/angular-ui-tree/angular-ui-tree/issues/272

例如，在我的情况下，我从一棵树拖到另一棵树，在这种情况下，必须在 SOURCE 树选项（而不是我最初认为的 DESTINATION 选项）中覆盖删除的函数。

相关问题中的讨论帮助我找到了很多。