Angular.js、Masonry 和 jQueryUi 可排序

Question

我正在尝试创建一个非常简单的 Angular 应用程序，将 Masonry 和一种对附加元素进行排序的方法混合在一起。我见过很多使用 jQueryUi 的例子： http://jsfiddle.net/dj_straycat/Q5FWt/3/ 也是一种指令方法http://passy.github.io/angular-masonry/

虽然我尝试了很多通过所有示例，但似乎效果不佳。 我的应用程序的目标是创建一个带有可排序选项的列表添加应用程序。 我遵循了 Masonry 的创建者示例，如下所示：http://jsfiddle.net/desandro/XMfwZ/1/

我的完整 Javascript 代码：

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {

    $scope.t = $('#masonry');

    $scope.t.masonry({
        itemSelector:        '.layout-card',
        isResizable:        true,
        columnWidth: 150
    })

    $scope.t.sortable({
        distance: 12,
        forcePlaceholderSize: true,
        items: '.layout-card',
        placeholder: 'card-sortable-placeholder layout-card',
        tolerance: 'pointer',

        start:  function(event, ui) {            
                 console.log(ui); 
            ui.item.addClass('dragging').removeClass('layout-card');
            if ( ui.item.hasClass('bigun') ) {
                 ui.placeholder.addClass('bigun');
                 }
                   ui.item.parent().masonry('reload')
                },
        change: function(event, ui) {
                   ui.item.parent().masonry('reload');
                },
        stop:   function(event, ui) { 
                   ui.item.removeClass('dragging').addClass('layout-card');
                   ui.item.parent().masonry('reload');
        }
   });

    $scope.toBeRepeated = [{
        id: 1,
        content: 'Blah'
    }];

    var i = 2;

    $scope.prepend = function() {
        $scope.toBeRepeated.unshift({
            id: i,
            content: 'Blah' + i
        });
        i = i - 1;
    };

    $scope.add = function() {

        $scope.toBeRepeated.push({
            id: i,
            content: 'Blah' + i
        });
        i = i + 1;

    };

    $scope.addMultipleItems = function() {
        var arrayToPush = [];
        for (var j = 10; j <= 20; j++) {
            arrayToPush.push({
                id: j,
                content: 'Blah' + j
            });
        }
        $scope.toBeRepeated = $scope.toBeRepeated.concat(arrayToPush);
    }

    $scope.remove = function(item) {
        var id = $scope.toBeRepeated.indexOf(item);
        if (id != -1) {
            $scope.toBeRepeated.splice(id, 1);
        }
    };

    $scope.reload = function() {
        $scope.toBeRepeated = [{
            id: 1,
            content: 'Blah blah'
        }, {
            id: 2,
            content: 'Blah blah2'
        }];
        $scope.toBeRepeated = $scope.toBeRepeated.concat([{
            id: 3,
            content: 'blah3'
        }]);
    }

});

以及完整的工作演示：http://plnkr.co/edit/TWo6r94IA6hjLQdwE3h3。 尽管可排序选项效果很好，但删除元素以及前置和附加新元素似乎存在问题。 提前致谢。

Answer 1

当 Angular 对 DOM 进行更改时，Masonry 不会收到通知。添加这样的函数...

function reloadMasonry() {
    return $timeout(function() {
        $('#masonry').masonry('reload');
    });
}

并在列表发生任何更改后调用它。例如：

$scope.prepend = function() {
    $scope.toBeRepeated.unshift({
        id: i,
        content: 'Blah' + i
    });
    i = i - 1;
    reloadMasonry();
};

Updated Plunker

一旦你得到它的工作，考虑把它变成一个指令，而不是在控制器中进行所有这些 DOM 操作。