Question

我正在使用angular-ui-tree在我的应用中构建项目树。我正在使用它的拖拽和放大器下降功能，我需要知道什么时候和＆amp;发生丢弃的地方（在什么元素上）。

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

我在文档中看到我可以访问控制器中的“丢弃”事件。但是我不明白如何根据拖动和放大来改变面板内容。丢弃的项目。

Answer 1

与documentations $ 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

嘿伙计们，我刚发现它！

{{1}}

希望它也适合你：）

Answer 3

您访问＆＃34;已删除＆＃34;像这样的项目。

$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树）中覆盖放置的函数。

相关问题的讨论对我有所帮助。

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

4 个答案: