使用 angular-masonry 捕获 layoutComplete 事件答案

【问题标题】：Capturing layoutComplete event with angular-masonry使用 angular-masonry 捕获 layoutComplete 事件
【发布时间】：2023-04-05 07:36:01
【问题描述】：

我在我的一个项目中使用angular-masonry，并像这样设置它...

<div id="tile_container" masonry preserve-order column-width="340" reload-on-show masonry-options="{ transitionDuration: '0.2s', gutter: 0 }">
    <div ng-repeat="tile in tiles" class="masonry-brick">
        ...
    </div>
</div>

现在，AngularJS 需要几秒钟来获取我的 tiles 对象中的项目，然后 Masonry 将它们布置好。如何使用此方法从砌体中捕获layoutComplete 事件？

【问题讨论】：

标签： angularjs masonry

【解决方案1】：

看这个：

var $grid = angular.element('#tile_container'); 
$grid.masonry( 'on', 'layoutComplete',
     function( msnryInstance, laidOutItems ) {
        console.log('layoutComplete');
     } );

【讨论】：

当我将此代码放入我的控制器时，我收到一个错误：cannot call methods on masonry prior to initialization; attempted to call 'on'
好吧，我可以让它工作，但不能正常工作。 layoutComplete 被多次发出，或者在页面加载时只发出一次 - 这可能是因为我正在向布局动态添加砖块。

【解决方案2】：

在您的控制器中，

$scope.$on('masonry.created', function (evt, element) {
        element.masonry('on', 'layoutComplete', function(instance, items) {
           console.log(instance);
        });
    });

它对我有用。

【讨论】：