如何在angular-masonry中触发重新加载？

Question

我使用angular-masonry指令让Masonry在我的AngularJS应用程序中工作，但我希望能够在我的控制器中调用一个函数或方法，以触发容器中项的重新加载。我在源代码(101-104行)中看到了一个reload方法，但我不确定如何调用它。有什么想法吗？

谢谢!

Answer 1

如果它在将来对某人有用，帕西会关注一个名为masonry.reload的事件。

因此，您可以发出此事件，Passy应该在masonry元素上调用'layout‘，例如调用

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

在我的例子中，我使用了一些第三方javascript来装饰我的砖块，所以我需要在完成后重新粉刷。由于原因(我不知道为什么)，我需要在超时中包装事件广播，我认为Passy调度程序正在吃掉事件，而不是重新绘制。例如，我做到了：

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

这样你就不必直接修改Passy了。

Answer 2

我不认为可以直接触发reload()方法，因为它是控制器的一部分，而控制器只在指令中可见。

你可以选择...

jQuery A)通过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)自己加载或扩展指令，例如在masonry-brick上添加必要的监视，并在内部调用()方法(取决于您有什么用例)。

.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');
            }
        }
      );
      ...

在上面的代码块中，我简单地使用' masonry -brick‘类在元素上添加了一个监视，以便在元素的高度发生变化时触发masonry的重新加载。

我自己创建了一个用于测试passys的angular-masonry的jsFiddle，请随时查看它！

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

编辑：

我刚刚在stackoverflow上找到了一个类似的帖子，这可能是这个问题的另一个解决方案：

AngularJS Masonry for Dynamically changing heights

Answer 3

来自@SebastianRiemer的答案帮助了我。

但对于将来需要帮助的人，可以尝试使用以下方法

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