Сохранить эффект кладки с помощью сортировки и фильтрации Angular JS

Question

Пожалуйста, взгляните на скрипку, которая имеет Angular JS с макетом кладки Jquery. Я хочу использовать угловую сортировку и поиск. Переходы не очень плавные, а также расположение каменной кладки не кажется полностью функциональным.

Есть ли предложение о том, как можно добиться эффекта типа кладки и включить угловой с сортировкой / фильтрацией и т. Д. http://jsfiddle.net/rdikshit/AMbF5/embedded/result/

<div ng:app="test">
<div ng-controller="MainCtrl">
    <input type="text" ng-model="nameFilter" /> <a href="#" ng-click="order = 'id'; reverse=!reverse">Order by id</a>
 <a href="#" ng-click="order = 'name';reverse=!reverse">Order by name</a>
 <a href="#" ng-click="order = 'age';reverse=!reverse">Order by age</a>
    <div id="container" masonry>
        <div ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order:reverse" class={{item.style}}> <span>{{item.name}}</span>
            <br /<span>id: {{item.id}}</span>

            <br /> <span>Age: {{item.age}}</span>

            <br /> <span>Style: {{item.style}}</span>

        </div>
    </div>
</div>

Из

Если есть какие-либо пользовательские директивы и т. Д., Которые помогут мне легко добиться этого, пожалуйста, предложите. Я попробовал директиву Пасси, однако, когда я добавляю сортировку и фильтрацию, макет кладки ломается.

Answer 1

Я столкнулся с этой же проблемой. Я смог решить эту проблему, установив часы на переменную (и) сортировки, а затем с помощью кладки перезагрузить элементы и повторно запустить метод макета (с небольшой задержкой), когда значения сортировки были изменены.

$scope.$watch('order', function (newVal, oldVal) {
    if (newVal != oldVal) {
        $timeout(function () {
            $element.masonry('reloadItems');
            $element.masonry('layout');
        }, 300);
    }
}, true);
$scope.$watch('reverse', function (newVal, oldVal) {
    if (newVal != oldVal) {
        $timeout(function () {
            $element.masonry('reloadItems');
            $element.masonry('layout');
        }, 300);
    }
}, true);