包装指令

Question

我有一系列物品。而且我需要在预定量之后包装一堆这些项目。例如：

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div>
    <span>4</span>
</div>

这是因为Bootstrap Grid的使用。

现在我正在使用AngularJS并拥有这样的结构：

<span ng-repeat="item in items"></span>

经过一定量的我需要包装它。我试图为此做出指示，但我很确定它有很大的改进空间：

app.directive('wrapper', function(){
    var itemsToWrap = [];
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.wrapper, function(newVal){
                itemsToWrap.push(element);
                if (newVal) {
                    for (var i = 0; i < itemsToWrap.length; i++) {
                        angular.element(itemsToWrap[i]).addClass('gnarf');
                    }

                    angular.element('.gnarf').wrapAll('<div />');

                    for (var i = 0; i < itemsToWrap.length; i++) {
                        angular.element(itemsToWrap[i]).removeClass('gnarf');
                    }
                    itemsToWrap = [];
                }
            });
        }
    }
});

html中的调用是：

<span ng-repeat="item in items" wrapper="$index % 3 == 2">
    {{item}}
</span>

它有效，但我认为使用css类来使用jQuery的wrapAll（）的解决方案并不是最好的主意。但我有问题将数组itemsToWrap转换为一个与jQuery wrapAll（）一起使用的数组;

此外：您如何保持包装标签的灵活性？简单属性？

提前致谢！

Answer 1

我有另一种方法：

app.directive('wrapper', function(){
    var itemsToWrap = angular.element();
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.wrapper, function(newVal){
                jQuery.merge(itemsToWrap, element);
                if (newVal) {
                    itemsToWrap.wrapAll('<div />');
                    itemsToWrap = angular.element();
                }
            });
        }
    }
});

这可行，但它需要jQuery。但是我认为jQuery是必需的，因为wrapAll()函数。这种方法至少比问题中的方法更好。