使用 angularjs 调用 jquery masonry

Question

我正在尝试让 angularjs 与 jquery masonry 一起使用。没有角度我已经设法让砖石工作正常，包括css。但是，我使用 angular 编写了整个 web 应用程序的脚本，现在我通过 angular 动态加载项目。由于在动态添加数据后需要重新加载砌体，我编写了一个指令来监听角度重复中项目的最后一个元素，以便我可以调用 jquery 砌体。当我打电话给砌体时，由于某种原因，这些项目变得很奇怪，并且在最初没有 ng-repeat 的情况下加载时不会加载。请检查下面给出的代码，并告诉我我在这里做错了什么。我希望我有 plunkr/js fiddler，但由于我从后端提取数据，我无法复制相同的数据。

我使用的库叫做“ma​​sonry.pkgd.js”

<div id="container" class="masonry js-masonry"  data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item", "isFitWidth": true }'>
        <div class="grid-sizer"></div>-
         <div ng-repeat="item in items" class="{{item.class}}" newsitemupdated>       
             <?php $this->load->view('item') ?>
         </div>                 
 </div>

app.directive('newsitemupdated', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                     masonryUpdate();
                });
            }
        }
    }
});

var masonryUpdate = function() {

            var $container = $('#container').masonry({
                columnWidth: '.grid-sizer',
                itemSelector: '.item',
                isFitWidth: true
            });

                setTimeout(function() {

//                    $('#container').masonry();                    
                    $container.masonry('reloadItems');
                    console.log('called');

                }, 500);

}

这是我重新加载项目下面的样子。

这就是我重新加载项目后的样子

请告诉我我做错了什么以及如何在 ng-repeat 之后调用重新加载项目来加载 jquery masonry 它应该如何加载。

Answer 1

我已经通过以下操作修复了

首先我编写了一个函数来使用选项初始化我的砌体

function BuildMasonry() {

    var $container = $('#container').masonry();

    $container.masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        isFitWidth: true
    });
}

之后我会在 ng-repeat 完成加载时调用它。

var masonryUpdate = function() {

    $('#container').masonry('reloadItems');
    BuildMasonry();
}

希望这对那里的人有所帮助:)