Как исправить перекрывающиеся кирпичи с помощью Angular + Masonry?

Я использую директивы passy's angular-masonry для рендеринга плиточных элементов в моем приложении. В отличие от многих примеров каменной кладки, мои кирпичи не содержат изображений, только статический текст и содержимое макета, отображаемые с помощью пользовательской директивы. Моя установка выглядит так:

<div data-masonry
     data-column-width="250"
     data-load-images="false"
     data-preserve-order
     data-reload-on-show
     data-masonry-options="{ gutter: 15, isFitWidth: true, transitionDuration: 0 }">

     <div class="masonry-brick"
          data-ng-repeat="event in vm.events | orderBy: 'startTime.toDate()' | filter: (vm.showOnlyRegistered && { going: true })">

          <div data-event-item="event"></div>

     </div>
</div>

data-event-item моя директива, которая делает что-то вроде:

<div class="panel panel-default panel-thin light-shadow bgcolor-override event-item-card">
<div class="panel-body" data-ng-class="{'bg-success': event.going}">
    <div>
        <p class="text-medium text-thin">{{event.name}}</p>
    </div>

    <p>
        <strong>{{event.computed.locationName}}</strong><br />
        <span data-ng-if="!event.virtual">{{event.city}}, {{event.state}} {{event.zipCode}}</span>
    </p>
    <span class="center-block">
        <span data-discover-pill data-type="default">
            <span class="text-thin">{{event.computed.registrationLabel}}</span>
        </span>
    </span>

    <button type="button" 
            class="btn push-to-bottom bottom-center"
            data-ng-class="{'btn-default': !event.going, 'btn-success': event.going}"
            data-ng-click="toggleGoing(event.id)">
        I'm Going <i class="fa fa-check"></i>
    </button>
</div>

В моем CSS у меня есть определенный width а также height для элементов, которые входят в кирпичи, так что (плюс тот факт, что я явно устанавливаю masonry column-width) должен сообщить каменной кладке, насколько велики все мои кирпичи.

Все работает отлично, за исключением того, что иногда (случайно?) При загрузке страницы все кирпичики отображаются друг над другом в большой стопке на левом краю, как будто процедура макета не сработала. Если размер окна изменяется вручную, все становится нормальным и остается таким же. Кажется, это проблема, с которой столкнулись некоторые другие: https://github.com/passy/angular-masonry/issues/82

Я перепробовал все комбинации preserve-order а также load-images="false" и так далее. Я думаю, что мне нужно вручную запустить reload / relayout, но, насколько я знаю, с помощью директивы passy, ​​вы не можете напрямую вызывать методы кладки.

Источник

3 ответа

Решение

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

Я перешел к директиве по угловым кладкам Кледерсона и был очень доволен этим решением. Я не проверял, чтобы подтвердить, но это, казалось, ускорило время загрузки.

угловая Кладка директивы

Очень простая и полностью совместимая с AngularJS директива по кладке... Вы знаете, как использовать кладку? Хорошо! Вы знаете, как использовать это.

Эта директива предназначена для библиотеки libon, а не для jQuery.

Источник

Для тех, кто сталкивался с подобной проблемой, я понял это с помощью этих ответов. В качестве бонуса, это помогает мне с обновлением после использования угловых фильтров, чтобы изменить, какие кирпичи показываются (с этим связан второй связанный ответ).

Вот мой рабочий код, который я запускаю, когда мои асинхронные данные загружаются при загрузке страницы, а также каждый раз, когда данные фильтруются или пересматриваются:

function refresh() {
    // We need to give Masonry a little jump-start, otherwise the bricks
    // will render in one big overlapped stack sometimes
    common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}

Без $timeoutЭто выглядит (на мой плохо обученный взгляд), как будто сообщение перезагрузки расходуется до завершения цикла дайджеста, поэтому фильтрация или сортировка, возможно, еще не произошли. Я не уверен, что это лучшее решение, но оно пока работает в моем тестировании. Если у кого-то есть лучшее, я бы с удовольствием это увидел.

Источник

Пробовал 3 фреймворка и работает только этот: https://github.com/s-yadav/angulargrid

Не требуется сторонняя библиотека! и плавно с твиттером. Надеюсь, что это может помочь кому-то в будущем

Обратите внимание на других:

Источник
Другие вопросы по тегам