Javascript AngularJS流沙

有没有办法在Angular中实现jQuery？也许有一个实现，但我似乎找不到它

也许这样做的策略会对我有所帮助，因为quicksand获取一个列表，然后将新列表作为参数接收，但使用Angular的重新渲染数据的方法，我不知道如何做到这一点。

您需要添加一个列表来完成此操作

因此，只要使用jQuery，您就可以：

JS

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

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

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

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>

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

iOS
android
Windows Phone 7


Mac OS X
Mac OS 9
iOS

---

注意，这是未经测试的，但应该可以。

我使用砌体指令+ng animate为进入/离开动画实现了类似的功能，这里是一个仅CSS动画的演示（带有chrome供应商前缀CSS）：

该指令：

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

angular.module（'app'，[]）
.指令（“砌体”，功能（）{
变量NGREPEAT\u SOURCE\u RE=''；
返回{
编译：函数（元素、属性）{
//自动将动画添加到砖元素
var animation=attrs.ngAnimate | |“‘砌体’”；
var$brick=element.children（）；
$brick.attr（“ng动画”，动画）；
//生成项目选择器（不包括离开的项目）
变量类型=$brick.prop（'tagName'）；
var itemSelector=type+“：不（[class$='-保持活动']）”；
返回函数（范围、元素、属性）{
var options=angular.extend({
itemSelector:itemSelector
}，属性砌体）；
//尝试从ngRepeat推断模型
如果（！options.model）{
var ngRepeatMatch=element.html（）.match（NGREPEAT\u SOURCE\u RE）；
如果（匹配）{
options.model=ngRepeatMatch[4]；
}
}
//初始动画
元素。addClass（“砌体”）；
//在指令内部等待渲染
setTimeout（函数（）{
构件。砌体（选项）；
元素上（“$destroy”，函数（）{
砌体构件（“破坏”）
});
if（options.model）{
作用域$apply（函数（）{
范围.$watchCollection（options.model，function（_new，_old）{
如果（_new==_old）返回；
//在指令内部等待渲染
setTimeout（函数（）{
构件。砌体（“重新加载”）；
});
});
});
}
});
};
}
};
})

与任何其他DOM操作插件一样，需要在angular指令中对其进行初始化。如果angular将创建

LI

元素，例如使用非常光滑的

ng repeat

，请将代码包装在

$timeout

中。我正在处理一个更复杂的示例，其中容器（也是一个LI）中有LI，并且动画应用于所有子体时存在问题。我的修复方法是更改

var itemSelector=type+”：不（[class$='-保持活动状态]）”到
var itemSelector='.mashise>“+type+”：不（[class$='-保持活动状态]）”