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

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”类的元素上添加了一个监视，以便在元素的高度发生变化时触发砌体的重新加载。

我自己创建了一个 jsFiddle 来测试 passys 的 Angular-Masonry，请随意查看！

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

编辑：

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

AngularJS Masonry 用于动态改变高度