Angular.js、圬工和jQueryUi可排序

我正在尝试创建一个非常简单的Angular应用程序，混合了砖石结构和对附加元素排序的方法。我已经看到了许多使用jQueryUi的示例： 也是一种指导性的方法

虽然我尝试了很多，但通过了所有的例子，它似乎并不奏效。 我的应用程序的目标是创建一个带有可排序选项的列表添加应用程序。 我遵循了砌体的创造者示例，如图所示：

我的完整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'
        }]);
    }

});

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.t=$（“#砌体”）；
$scope.t.砌体({
项目选择器：'.layout card'，
isResizable:没错，
列宽：150
})
$scope.t.可排序({
距离：12，
大小：true，
项目：'.layout card'，
占位符：“卡片可排序占位符布局卡片”，
公差：“指针”，
开始：函数（事件，ui）{
控制台日志（ui）；
ui.item.addClass（'drawing'）.removeClass（'layout-card'）；
if（ui.item.hasClass（'bigun'））{
ui.placeholder.addClass（'bigun'）；
}
ui.item.parent（）
},
更改：功能（事件、用户界面）{
ui.item.parent（）；
},
停止：函数（事件，ui）{
ui.item.removeClass（'drawing'）.addClass（'layout-card'）；
ui.item.parent（）；
}
});
$scope.toBeRepeated=[{
id:1，
内容：“废话”
}];
var i=2；
$scope.prepend=函数（）{
$scope.toBeRepeated.unshift({
id:我，
内容：'Blah'+i
});
i=i-1；
};
$scope.add=函数（）{
$scope.toBeRepeated.push({
id:我，
内容：'Blah'+i
});
i=i+1；
};
$scope.addMultipleItems=函数（）{
var arraytophush=[]；
对于（var j=10；j当Angular对DOM进行更改时，不会通知Mashine

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

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

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


一旦你让它工作起来，就把它放到一个指令中，而不是在控制器中进行所有DOM操作。
谢谢你的快速回答。我肯定会把代码作为一个指令来工作。作为一种方法，它更快吗？这只是在角度上做事情的方式。控制器中不应该有DOM操作。大多数它们是在指令中完成的。