javascript - AngularJS 流砂

Question

Angular でjQuery のQuicksand プラグインを実装する方法はありますか? おそらく実装はありますが、私はそれを見つけることができないようです。

おそらく、quicksand はリストを受け取り、パラメータとして新しいリストを受け取るため、それを行う戦略が役立つでしょうが、データを再レンダリングする Angular の方法では、それを行う方法がわかりません。

Answer 1

私は石積みディレクティブ + ng-animate を使用して同様のものを実装しました。これは、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

これを行うには、ディレクティブを追加する必要があります。

したがって、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>

Angular を使用すると、次のことができます。

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>

これはテストされていませんが、問題ないはずです。