Javascript angular指令中的砖石初始化与vanilla js错误

我在一个项目中使用了砖石结构，我希望它在angular指令中初始化，但当窗口调整大小时，会出现一些奇怪的行为，整个网格非常混乱。所有参数都是相同的

纯香草JS工作正常，但在angular指令中，我认为gotter参数被省略了

HTML:

JS:

有趣的是，若我用jquery在angular指令中初始化砖石结构，一切正常，但我不想这样做

我们如何避免这种情况？

---

Tnx

尝试将代码放入指令的

链接中

功能仍然存在相同的问题：

<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>

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

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