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

Question

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

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

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

Answer 1

如 documentations $callbacks(类型:对象)

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

您在 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 添加 回调=“树选项”您上面在 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>

然后你可以从这里访问旧 parent

e.source.nodeScope.$parentNodeScope.$modelValue

你可以从这里访问新的父级

e.dest.nodesScope.$parent.$modelValue