Question

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

谢谢！

Answer 1

如果将来有人使用它，Passy会观看名为masonry.reload的活动。

所以，你可以发布这个事件，而且Passy应该调用＆＃39; layout＆＃39;在砌体元件上，例如，调用

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

在我的情况下，我有一些第三方javascript装饰我的砖块，所以我需要在完成之后重新绘制。由于原因（我无法弄明白为什么），我需要在超时中包装事件广播，我认为Passy调度程序正在吃掉事件而不是重新绘制。例如。我做了：

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

这样您就不必直接修改Passy。

Answer 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）或者自己扩展指令，即在砌砖上添加必要的手表并调用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＆＃39;角砌砖我自己，随便看看吧！

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

如何触发角度砌体的重装？

3 个答案: