AngularJS Quicksand

¿Hay alguna forma de implementar el complemento Quicksand de jQuery en Angular? Tal vez hay una implementación, pero parece que no puedo encontrarlo.

Tal vez una estrategia para hacerlo me ayude porque quicksand toma una list y luego recibe como parámetro la nueva list, pero con la forma en que Angular re-renderiza los datos no tengo idea de cómo hacer eso.

Implementé algo similar usando una directiva de albañilería + ng-animate para ingresar / dejar animaciones, aquí hay una demostración de animation CSS únicamente (con CSS prefijado por el proveedor de Chrome):

http://jsfiddle.net/g/3SH7a/

La directiva:

 angular.module('app', []) .directive("masonry", function () { var NGREPEAT_SOURCE_RE = '<!-- ngRepeat: ((.*) in ((.*?)( track by (.*))?)) -->'; return { compile: function(element, attrs) { // auto add animation to brick element var animation = attrs.ngAnimate || "'masonry'"; var $brick = element.children(); $brick.attr("ng-animate", animation); // generate item selector (exclude leaving items) var type = $brick.prop('tagName'); var itemSelector = type+":not([class$='-leave-active'])"; return function (scope, element, attrs) { var options = angular.extend({ itemSelector: itemSelector }, attrs.masonry); // try to infer model from ngRepeat if (!options.model) { var ngRepeatMatch = element.html().match(NGREPEAT_SOURCE_RE); if (ngRepeatMatch) { options.model = ngRepeatMatch[4]; } } // initial animation element.addClass('masonry'); // Wait inside directives to render setTimeout(function () { element.masonry(options); element.on("$destroy", function () { element.masonry('destroy') }); if (options.model) { scope.$apply(function() { scope.$watchCollection(options.model, function (_new, _old) { if(_new == _old) return; // Wait inside directives to render setTimeout(function () { element.masonry("reload"); }); }); }); } }); }; } }; }) 

Debe agregar una directiva para hacer esto.

Entonces con solo jQuery, tendrías:

JS

 $('#source').quicksand( $('#destination li') ); 

HTML

 <ul id="source"> <li data-id="iphone">iOS</li> <li data-id="android">Android</li> <li data-id="winmo">Windows Phone 7</li> </ul> <ul id="destination" class="hidden"> <li data-id="macosx">Mac OS X</li> <li data-id="macos9">Mac OS 9</li> <li data-id="iphone">iOS</li> </ul> 

Con Angular puedes hacer:

JS

 yourApp.directive('jqQuicksand', function(){ var linkFn = function(scope,element,attrs){ // element here = $(this) // bind your plugin or events (click, hover etc.) here element.quicksand( $(attrs.jqQuicksand) ); } return { restrict:'A', scope: {}, link: linkFn } }); 

HTML

 <ul data-jq-quicksand="#destination li" id="source"> <li data-id="iphone">iOS</li> <li data-id="android">Android</li> <li data-id="winmo">Windows Phone 7</li> </ul> <ul id="destination" class="hidden"> <li data-id="macosx">Mac OS X</li> <li data-id="macos9">Mac OS 9</li> <li data-id="iphone">iOS</li> </ul> 

Tenga en count que esto no está probado, pero debería estar bien.