AngularJS流沙 [英] AngularJS Quicksand

问题描述

有什么办法来实现jQuery的流沙插件在角？或许有一个实现，但我似乎无法找到它。

Is there any way to implement jQuery's Quicksand plugin in Angular? Perhaps there is an implementation but I can't seem to find it.

也许一个战略做能帮助我，因为流沙接受一个列表，然后作为参数接收新的列表，但重新呈现数据的角度的方式，我不知道该怎么做。

Perhaps a strategy to do it would help me because quicksand takes a list and then receives as a parameter the new list, but with Angular's way of re-rendering data I have no idea how to do that.

推荐答案

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

I implemented something similar using a masonry directive + ng-animate for enter/leave animations, here's a CSS animation only demo (with chrome vendor prefixed 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");
                                });
                            });
                        });
                    }
                });
            };
        }
    };
})

这篇关于AngularJS流沙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！