棱角分明的嵌套重复断裂指令(包装+拖拽)

Question

我在角度中使用dragabilly时遇到了一个小问题，这个问题很奇怪，因为它一直在工作，直到我对使用packery的内容加载方式进行了一些更改，特别是添加了嵌套重复的级别。当我这样做时，packery 仍然正常运行，但是似乎 dragabilly 只在第一个对象上运行。

网页看起来像 -

 <div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
    <!-- nested repeat -->
    <div ng-repeat="side in widget.sides" ng-show="side.active">

所以这只是一个嵌套的重复，包装从外部项目跑掉，同样，包装元素工作正常。当我添加嵌套重复时它坏了 - 这些对象有多个面，我用那一侧隐藏了这些面.acive 你在那里看到，但是拖动手柄在嵌套重复内，我认为这可能是问题所在，或者嵌套需要更长的时间加载并且它没有及时识别手柄？我不太确定，这就是我可以使用一些方向的地方。

这是指令 - http://jsfiddle.net/yq4zwLzs/.我唯一添加的是移动UA检查，以尝试关闭移动设备上的dragabilly，因为那时没有必要。我试着把它取下来，它似乎没有任何影响。

这是它在行动中的一堆

——

http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview

原谅丑陋 - 但如果你看，你可以在顶部项目周围移动，但不能在底部项目周围移动。这就是我被困住的地方，我似乎无法弄清楚这是如何或为什么发生的。您可以通过 .handle(标题元素(拖动项目。我将不胜感激任何帮助，因为我似乎被困在这里。

感谢您的阅读！

更新

似乎即使我将 .handle 放在内部重复之外，它仍然存在同样的问题。也许这与内部重复和棱角分明的包装运行的顺序有关？

更新 2

拖动手柄逻辑似乎根本不起作用，您可以拖动任何东西，而不仅仅是 .handle

更新 3

我

几乎可以肯定这与嵌套的ng-repeat有关(也许它与指令在对象上的运行方式相互作用(，因为无论我尝试什么，只要我有嵌套的重复，我就有同样的问题。如果我把它拉下来，它会恢复正常工作，但是如果没有它:(，就很难实现我想要的目标。

另外 - 如果我转身

var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );

到

var draggable2 = new Draggabilly(element[0] );

它工作正常。不过，我需要一个拖动手柄，因为用户将与之交互的这些div 中会有内容，并且我不希望div 在他们在其中单击时四处移动。也许有没有办法稍后启动 dragabilly？

Answer 1

看起来这可能是

一个摘要问题，就好像您将 Draggabilly 创作粘贴到$timeout它按预期工作

一样

if(!isMobile()){
    $timeout(function(){
        var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
        $rootScope.packery.bindDraggabillyEvents(draggable2);
    })
}

http://plnkr.co/edit/qxv1VWPHZEKX3pVHgBi2?p=preview

我在摆弄它时注意到的一件事是，如果您使用与handle不同的选项，例如{ axis: 'x'}那么它无需$timeout即可工作。