Как вы запускаете перезагрузку в угловой кладке?

Question

Я заставил Masonry работать в моем приложении AngularJS, используя директиву angular-masonry, но я хочу иметь возможность вызывать функцию или метод в моем контроллере, который вызовет перезагрузку элементов в контейнере. Я вижу в исходном коде (строки 101-104) есть метод перезагрузки, но я не уверен, как это вызвать. Есть идеи?

Спасибо!

Answer 1

В случае, если это пригодится кому-то в будущем, Passy следит за событием, которое называется masonry.reload.

Таким образом, вы можете создать это событие, и Passy должен вызвать 'layout' для элемента masonry, например, call

$rootScope.$broadcast('masonry.reload');

В моем случае у меня был какой-то сторонний javascript, украшающий мои кирпичи, поэтому мне нужно было перекрасить после того, как это было сделано. По причине (я не мог понять, почему), мне нужно было обернуть трансляцию события в тайм-аут, я думаю, что планировщик Passy съел событие, а не перерисовал. Например, я сделал:

$timeout(function () {
   $rootScope.$broadcast('masonry.reload');
   }, 5000);

Таким образом, вам не нужно изменять Passy напрямую.

Answer 2

Ответ от @SebastianRiemer помог мне.

Но для будущих людей, которые нуждаются в помощи, попробуйте вместо этого использовать следующее

scope.$watch(function () {
    return element.height();
},
function (newValue, oldValue) {
    if (newValue != oldValue) {
        ctrl.scheduleMasonryOnce('reloadItems');
        ctrl.scheduleMasonryOnce('layout');
    }
});

Answer 3

Я не думаю, что вы можете вызвать метод reload() напрямую, поскольку он является частью контроллера, который виден только в директивах.

Вы можете либо...

А) инициировать перезагрузку каменной кладки напрямую через элемент в стиле jQuery

(см. http://jsfiddle.net/riemersebastian/rUS9n/10/):

$scope.doReloadRelatively = function(e) {
    var $parent = $(e.currentTarget).parent().parent();
    $parent.masonry();
}

$scope.doReloadViaID = function() {
    $('#container').masonry();
}

B) или самостоятельно расширять директивы, т. Е. Добавлять необходимые часы в кирпичную кладку и вызывать метод reload() внутри (зависит от того, какой у вас вариант использования).

.directive('masonryBrick', function masonryBrickDirective() {
  return {
    restrict: 'AC',
    require: '^masonry',
    scope: true,
    link: {
      pre: function preLink(scope, element, attrs, ctrl) {
        var id = scope.$id, index;

        ctrl.appendBrick(element, id);
        element.on('$destroy', function () {
            console.log("masonryBrick > destroy")
          ctrl.removeBrick(id, element);
        });

        scope.$watch(function () {
            return element.height();
        },
        function (newValue, oldValue) {
            if (newValue != oldValue) {                    
                console.log("ctrl.scheduleMasonryOnce('layout');");
                ctrl.scheduleMasonryOnce('layout');
            }
        }
      );
      ...

В приведенном выше блоке кода я просто добавил наблюдение за элементом с классом "кирпичная кладка" для запуска перезагрузки каменной кладки при изменении высоты элементов.

Я сам создал jsFiddle для тестирования угловой кладки passys, не стесняйтесь проверить это!

http://jsfiddle.net/riemersebastian/rUS9n/10/

РЕДАКТИРОВАТЬ:

Только что нашел похожий пост на stackru, который может стать еще одним решением этой проблемы:

AngularJS Masonry для динамически меняющихся высот