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);
});
}
};
}
documentation提到要使用moves
函数创建一个句柄,这可能会帮到我,但是我从该函数或accepts
函数中都找不到日志。
我尝试使用$postLink
和$scope.$$dragula
上的观察者来确保它已启动,甚至尝试使用dragulaService.find($scope, self.item.id)
上的观察者。没有一个...
答案 0 :(得分:0)
问题在于库查找包名的方式。这使用$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
, etc ...
<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