javascript - Angular 和 Masonry 协同工作

Question

我没有让 masonry 在 ng-repeat 中工作。

我尝试添加一个类 masonry-container，并在我的 ng-repeat 中使用类 masonry-item。

在我的 js 中，我使用这两个类，我的 js 文件加载如下:-jquery-石工-我的文件

1. HTML)

<div class="masonry-container" >
<div ng-repeat="link in links">
<div class="masonry-item col-sm-4">
<div class="jumbotron">
<div>
{{link.title}}
</div>
<div>
{{link.url}}
</div>
</div>
</div>
</div>
</div>


1.1JS)

$(document).ready(function(){

  $('.masonry-container').masonry({
    // options
    itemSelector: '.masonry-item',
    columnWidth: '.masonry-item'
  });
});

Answer 1

我不知道 masonry ，但是当你的 JS 执行时，Angular 还没有渲染模板。

要执行您想做的操作，您应该使用指令并将代码放入link函数中。

angular.module('Example', [])
.directive('masonry-container', [function () {
    return {
        link: function ($scope, element, attributs, controllers) {
            element.masonry({
                // ...
            });
            // ...
        }
    };
}])

Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put.

https://docs.angularjs.org/guide/directive