Позвоните в jquery masonry, используя angularjs

Question

Я пытаюсь заставить angularjs работать с jquery kason. Без углового я сумел получить кладку, чтобы нормально работать, включая css. Тем не менее, я использовал угловой для сценария всего веб-приложения, и теперь я загружаю элементы динамически через угловые. Так как класирование необходимо перезагрузить после динамического добавления данных, я написал директиву для прослушивания последнего элемента элементов в угловом повторении, чтобы я мог вызвать кластер jquery. Когда я называю кладку, по какой-то причине элементы становятся все странными и не загружаются, когда они загружаются изначально без ng-repeat. Пожалуйста, проверьте приведенный ниже код и скажите мне, что я здесь делаю неправильно. Мне жаль, что у меня не было plunkr/js fiddler, но поскольку я извлекаю данные из бэкэнд, я не могу воспроизвести то же самое.

Библиотека я использую называется «masonry.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); 

} 

Вот как это выглядит ниже я перезарядить элементы.

Вот как это выглядит после того, как я reloaditems

Пожалуйста, скажите мне, что я делаю неправильно и как я могу назвать пункты перезарядки после нг-повтора, чтобы загрузить JQuery кладку, как его должен был загружаться.

Answer 1

Я установил, выполнив следующие действия

Сначала я написать функцию, чтобы инициализировать свою кладку с опциями

function BuildMasonry() { 

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

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

После этого я буду называть его, когда нг-повтора после загрузки.

var masonryUpdate = function() { 

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

Надеется, что это помогает кто-то там :)