AngularJS Quicksand

Question

有没有什么办法在Angular中实现jQuery的Quicksand plugin？也许有一个实现，但我似乎无法找到它。

也许一个策略可以帮助我，因为流沙需要一个列表，然后接收一个参数作为新列表，但是使用Angular重新呈现数据的方式我不知道该怎么做。

Answer 1

我实现了类似的东西用砖石指令+ NG-动画的进入/离开动画，这里有一个CSS动画仅演示（铬供应商前缀的CSS）：

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

的指令：

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"); 
           }); 
          }); 
         }); 
        } 
       }); 
      }; 
     } 
    }; 
}) 

Answer 2

你需要添加一个directive来做到这一点。

所以只用了jQuery，你必须：

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> 

具有角你可以这样做：

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> 

注意，这是未经测试，但应该没问题。