AngularJS-Dragula вложенные списки

Question

TL;DR;
Мне нужно перетащить во вложенные списки, и я не могу заставить его работать. Я собрал быстрый пример на 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 функция.

Я пытался использовать $postLink и наблюдатель на $scope.$$dragula чтобы убедиться, что он инициирован, и даже наблюдатель на dragulaService.find($scope, self.item.id), Ничего из этого не сработало...

Answer 1

Проблема заключалась в том, что библиотека ищет имя сумки. Это использует $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