Question

我正在尝试创建一个非常简单的Angular应用程序，混合砌体和对附加元素进行排序的方法。我见过许多使用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操作。

Angular.js，Masonry和jQueryUi可排序

1 个答案: