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

Question

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

谢谢！

Answer 1

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

所以，你可以发出这个事件，Passy应该在砌体元素上调用'layout'，例如call

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

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

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

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

编辑：

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

AngularJS Masonry用于动态改变高度

Answer 3

@SebastianRiemer的答案帮助了我。

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

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