angularjs - 移动由 ng-repeat 创建的 angularJS 元素

Question

我正在尝试将 ng-repeat 创建的元素移动到某些列中。我用一个指令成功地做到了，但是当我对 ng-repeat 操作的对象数组进行排序时，就会出现问题。搜索最小列然后在其中插入元素的指令无法确定最小列(可能是因为列中仍有元素)。
我相信我使用的结构(指令/ Controller 等...)不是最佳的，而且我找不到如何组织 Angular 代码以获得我想要的行为。

这是一个 jsFiddle，显示了我现在所拥有的:http://jsfiddle.net/kytXy/6/您可以看到项目已正确插入到列中。如果您单击重新排列排序的按钮，则不会再次插入它们。如果你在同一个按钮上多次点击，看看会发生什么......
我放置了注释警报，您可以取消注释，以便您可以查看项目是如何插入的以及出了什么问题。我还尝试在再次插入之前清空列(在 jsfiddle 中评论了 js)，但没有任何成功。

这是代码:
HTML:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div ng-app="myModule">
    <div ng-controller="Ctrl" >
        <button ng-click="predicate = 'id'; reverse=false; setupColumns()">Sort ID</button>
        <button ng-click="predicate = 'id'; reverse=true; setupColumns()">Sort ID reversed</button>
        <div id="columns" generate-sub-columns post-render>
        </div>
        <div class="elements">
            Elements are stored here !
        <div class="element" ng-repeat="(key,elt) in elts | orderBy:predicate:reverse" id="element{{key}}">
           Text: {{elt.a}}
        </div>
        </div>
    </div>
</div>

JS:

var myModule = angular.module('myModule', []);

myModule.controller('Ctrl', function($scope) {
    $scope.predicate='id';
    $scope.reverse=false;

    $scope.elts = [
        {id:0,a:"Hi man !"},
        {id:1,a:"This is some text"},
        {id:2,a:"Wanted to say hello."},
        {id:3,a:"Hello World!"},
        {id:4,a:"I love potatoes :)"},
        {id:5,a:"Don't know what to say now. Maybe I'll just put some long text"},
        {id:6,a:"Example"},
        {id:7,a:"Example2"},
        {id:8,a:"Example3"},
        {id:9,a:"Example4"},
        {id:10,a:"Example5"},
        {id:11,a:"Example6"}
    ];

    $scope.setupColumns = function() {
        console.log('calling setupColumns');
        var eltIndex = 0;
        var element = jQuery("#element0");
        /*while(element.length > 0) {
            jQuery('#elements').append(element);
            eltIndex++;
            element = jQuery("#element"+eltIndex);
            alert(1);
        }
        alert('Columns should be empty');*/
        element = jQuery("#element0");
        eltIndex = 0;
        var columnCount = 0;
        while (jQuery("#column"+columnCount).size() >0)
            columnCount++;
        while(element.length > 0) {
            console.log('placing new element');
            var smallestColumn = 0;
            var smallestSize = jQuery("#columns").height();
            for (var i = 0; i < columnCount; i++) {
                var columnSize = jQuery(".column#column"+i).height();
                if (columnSize < smallestSize) {
                    smallestColumn = i;
                    smallestSize = columnSize;
                }
            };
            jQuery('.column#column'+smallestColumn).append(element);
            eltIndex++;
            element = jQuery("#element"+eltIndex);
            //alert(1);
        }
        //alert('Columns should be filled');
    };
});

myModule.directive('generateSubColumns', function() {
    return {
        restrict: 'A',
        controller: function() {
            var availableWidth = jQuery("#columns").width();
            var sizePerColumn = 100;
            var nbColumns = Math.floor(availableWidth/sizePerColumn);
            if (nbColumns<=1) 
                nbColumns=1;
            for (var i = 0; i < nbColumns; i++) {
                jQuery('<div class="column" id="column'+i+'">Column '+i+'</div>').appendTo('#columns');
            };
        }
    };
});

myModule.directive('postRender', [ '$timeout', function($timeout) {
    var def = {
        restrict: 'A', 
        terminal: true,
        transclude: true,
        link: function(scope, element, attrs) {
            $timeout(scope.setupColumns, 0);
        }
    };
    return def;
}]);

和一些CSS:

#columns {
    width: 100%;
}

.column {
    width: 100px;
    display:inline-block;
    vertical-align: top;
    border: 1px solid black;
}

.element {
    border: 1px solid red;
}

我该如何解决？
提前致谢，
希尔纽斯

Answer 1

首先..你为什么要做这样的事情？

var element = jQuery("#element0");

在 Controller 里面？
那种代码(DOM 操作)应该放在链接函数指令中并使用 $element访问DOM元素的参数。

另外.. 如果你使用 column-count 会怎样？属性来划分你的容器？ https://developer.mozilla.org/es/docs/Web/CSS/column-count