javascript – 有角度的,嵌套的重复破坏指令(packery dragabilly)

我在使用有角度的dragabilly时遇到了一个小问题,问题很奇怪,因为它一直有效,直到我对如何使用packery加载内容进行了一些更改,特别是添加了嵌套重复的级别.当我这样做时,packery仍然可以正常运行,但它似乎只能在第一个对象上运行.

html看起来像 –

<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">

所以它只是一个嵌套的重复,其中packery运行外部项目,并且再次,packery元素工作正常.当我在嵌套重复中添加它时它会破坏 – 这些对象有多个面,我隐藏在那边.你看到那里有活动,但是拖动句柄在嵌套重复内部,我认为这可能是问题,或者嵌套是加载时间稍长,并且无法及时识别手柄？我不太确定,这就是我可以使用某个方向的地方.

这是指令 – http://jsfiddle.net/yq4zwLzs/.我添加的唯一内容是移动UA检查尝试在移动设备上关闭可拖动性,因为在那时它是不必要的.我尝试取消它似乎没有任何影响.

这是一个行动的掠夺者 –

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？

解决方法

看起来它可能是一个摘要问题,就好像你将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

我注意到有一点需要注意的是,如果你使用不同于句柄的选项,例如{axis：’x’},那么它可以在不需要$timeout的情况下工作.