direttiva di interruzione ripetuta nidificata (packery + dragabilly)

Question

Ho un leggero problema con l'utilizzo di dragabilly in angolare, il problema è strano perché funzionava finché non ho apportato alcune modifiche al modo in cui il contenuto che utilizza packery è caricato, in particolare aggiungendo un livello di ripetizioni annidate. Quando faccio questo, packery funziona ancora correttamente, tuttavia sembra che dragabilly funzioni solo sul primo oggetto.

il codice HTML sembra -

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

Quindi è solo una ripetizione nidificato in cui Packery scappa degli elementi esterni, e ancora una volta, l'elemento Packery funziona bene. Si è rotto quando ho aggiunto la ripetizione annidata - questi oggetti hanno più facce che nascondo con quel lato. Si può vedere lì, tuttavia la maniglia di trascinamento è all'interno della ripetizione annidata e penso che questo potrebbe essere il problema, o forse l'annidato è richiede un po 'più tempo per caricare e non riconosce l'handle in tempo? Non ne sono troppo sicuro ed è lì che potrei usare una certa direzione.

Questa è la direttiva - http://jsfiddle.net/yq4zwLzs/. L'unica cosa che ho aggiunto è che il controllo UA mobile consente di provare a disattivare il dragabilly sui dispositivi mobili perché non è necessario a quel punto. Ho provato a toglierlo da quello che non sembra avere effetto.

Ecco una plunker di esso in azione -

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

perdonare il brutto - ma se si guarda, è possibile scorrere la voce in alto, ma non l'elemento di fondo. È lì che sono bloccato e non riesco a capire come e perché questo sta accadendo. Puoi trascinare gli oggetti con .handle (title element). Apprezzerei qualsiasi aiuto in quanto mi sembra di essere bloccato qui.

Grazie per la lettura!

Aggiornamento

Sembra anche se ho messo il .handle al di fuori della ripetizione interno, ha ancora lo stesso problema. Forse ha a che fare con l'ordine in cui la ripetizione interiore e il pacchetto angolario corrono?

Update 2

Sembra la logica maniglia di trascinamento non funziona affatto, è possibile trascinare da qualcosa, non solo .handle

Update 3

Sono quasi certo questo ha a che fare con ng-repeat annidato (forse interagendo in concomitanza con il modo in cui la direttiva viene eseguita sull'oggetto), perché non importa quello che provo, purché abbia la ripetizione annidata, ho lo stesso problema. Se io lo tiro fuori di esso risale a lavorare come al solito, tuttavia sarà difficile raggiungere il mio obiettivo desiderato senza di essa :(

Inoltre -. Se mi rivolgo

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

in

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

Funziona bene, ma ho bisogno di una maniglia di trascinamento, dato che ci sarà del contenuto all'interno di questi div con cui l'utente interagirà, e non voglio che il div si muova quando ci fa clic dentro.Forse se c'è un modo per iniziare il dragabilly un po 'più tardi?

Answer 1

sembra che potrebbe essere un problema di digest, come se si tiene fede alla creazione Draggabilly in un $ timeout funziona come previsto

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

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

Una cosa da notare ho notato mentre armeggiare intorno con esso, è se si utilizza un'opzione diversa da handle, ad esempio { axis: 'x'} quindi funziona senza la necessità per il $timeout.