Question

我在一个项目中使用砌体，我希望它在angular指令中初始化，但是当窗口调整大小时会出现一些奇怪的行为，并且整个网格非常错误。所有参数都是一样的。

Pure vanilla JS工作正常，但在angular指令中我认为gutter param被省略了。

HTML：

<div class="grid1" data-masonry>
  <div class="grid1-item"></div>
  <div class="grid1-item"></div>
</div>

<hr/>

<div class="grid2">
  <div class="grid2-item"></div>
</div>

CSS：

.grid1-item,
.grid2-item {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

JS：

var myApp = angular.module("myApp", []);
//not ok
myApp.directive("masonry", function() {
    return function(scope, el, attr) {
        new Masonry(el, {
            itemSelector: ".grid1-item",
            gutter: 20
        });
    }
});

var grid2 = document.querySelector(".grid2");
//ok
new Masonry(grid2, {
    itemSelector: ".grid2-item",
    gutter: 20
});

有趣的是，如果我使用jquery在angular指令中初始化砌体，一切正常，但我不想这样做。

FIDDLE

我们如何避免这种情况？ TNX

角度指令中的砌体初始化与vanilla js bug

0 个答案: