你如何触发角砌体的重新加载？答案

【问题标题】：How do you trigger a reload in angular-masonry?你如何触发角砌体的重新加载？
【发布时间】：2014-05-17 10:27:56
【问题描述】：

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

谢谢！

【问题讨论】：

标签： javascript angularjs jquery-masonry

【解决方案1】：

如果将来有人使用它，Passy 会监视名为 masonry.reload 的事件。

因此，您可以发出此事件，Passy 应在砌体元素上调用“布局”，例如打电话

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

就我而言，我有一些第三方 javascript 来装饰我的砖块，所以我需要在完成后重新绘制。出于某种原因（我无法弄清楚为什么），我需要在超时中包装事件广播，我认为 Passy 调度程序正在吃掉事件而不是重新绘制。例如。我做到了：

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

这样就不用直接修改Passy了。

【讨论】：

虽然没有记录它是有效的。感谢您的指点。我不必设置 $timeout 即可使其正常工作，所以您是对的（这与您的特定设置有关）。

【解决方案2】：

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

你可以...

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 上添加必要的监视并在其中调用 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');
            }
        }
      );
      ...

在上面的代码块中，我只是在具有“masonry-brick”类的元素上添加了一个监视，以便在元素的高度发生变化时触发重新加载砌体。

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

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

编辑：

刚刚在 stackoverflow 上发现了一篇类似的帖子，这可能是解决此问题的另一种方法：

AngularJS Masonry for Dynamically changing heights

【讨论】：

【解决方案3】：

@SebastianRiemer 的回答帮助了我。

但是对于未来需要帮助的人，请尝试使用以下方法

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

【讨论】：