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

Question

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

例如,我拖动item1,然后将其放在面板上.我希望面板显示项目名称.(每个项目都有一个名称属性).面板只是一个带文本的简单div.

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

Answer 1

如在文档中 $ callbacks(type: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.elOptions = {
    dropped: function(e) {
        console.log (e.source.nodeScope.$modelValue);     
    }
};