时间戳

首页 > 解决方案 > AngularJS-Dragula 嵌套列表

angularjs - AngularJS-Dragula 嵌套列表

问题描述

TL;博士;
我需要拖入嵌套列表，但无法正常工作。我在Plunkr编译了一个简单的例子。

我有没有定义深度的动态嵌套集，我只需要能够在它们自己的父容器中对它们进行排序。但是由于父母也被拖着走，所以每当你拿起一个孩子时，整棵树都被拖着走。

function ListItemController($scope, dragulaService) {
  var self = this;

  this.$onInit = function() {
    dragulaService.options( $scope, this.item.id, {
      removeOnSpill: false,
      moves: function (el, source, handle, sibling) {
        console.info(el, target, source, sibling);
        return el.id === self.item.id; // elements are always draggable by default
      },
      accepts: function (el, target, source, sibling) {
        console.info(el, target, source, sibling);
        return true; // elements can be dropped in any of the `containers` by default
      },
      invalid: function (el, handle) {
        return el.id !== self.item.id; // don't prevent any drags from initiating by default
      },
    });

    if (this.item.children && this.item.children.length > 0) {
      $scope.$on(this.item.id + '.drag', function() {
        console.info(this.item.id + '.drag', arguments);
      });
    }
  }; 
}

文档提到使用该函数moves创建一个句柄，这可能会帮助我，但我从来没有从那个函数中得到日志，也没有从accepts函数中得到日志。

我已经尝试使用$postLinkand 一个 watcher on$scope.$$dragula来确保它被启动，甚至是一个 watcher on dragulaService.find($scope, self.item.id)。都没有奏效...

标签： angularjsdragulaangular-dragula

解决方案

问题在于库查找包名的方式。这使用$scope.$eval. 这意味着它试图执行我给它的名字。

<span id="{{$ctrl.item.id}}">{{ $ctrl.item.text }}</span>
<ol dragula="{{$ctrl.item.id}}">
  <list-item ng-repeat="child in $ctrl.item.children" item="child"></list-item>
</ol>

这意味着这不起作用，它启动了名为0,-1等的列表...

<span id="{{$ctrl.item.id}}">{{ $ctrl.item.text }}</span>
<ol dragula="'{{$ctrl.item.id}}'">
  <list-item ng-repeat="child in $ctrl.item.children" item="child"></list-item>
</ol>

但是通过在语句周围添加单引号，$scope.$eval 将其视为一个字符串，从而使整个事情按预期工作。

有关完整代码，请查看：https ://plnkr.co/edit/6h1HUb98wwspJ1KggISh?p=preview

推荐阅读