相关疑难解决方法(0)

我正在开发一个" 艺术画廊 "应用程序.

随意下载github上的源代码并使用它.

具有完整来源的Plunker.

目前的工作是让Masonry与Angular合作:

.directive("masonry", function($parse) {
  return {
    restrict: 'AC',
    link: function (scope, elem, attrs) {
      elem.masonry({ itemSelector: '.masonry-brick'});
    }
  };     
})
.directive('masonryBrick', function ($compile) {
  return {
    restrict: 'AC',
    link: function (scope, elem, attrs) {
      scope.$watch('$index',function(v){
        elem.imagesLoaded(function () {
          elem.parents('.masonry').masonry('reload');
        });
      });
    }
  };    
});

这不能很好地工作,因为:

• 随着内容的增长,在整个容器上进行重载的开销也随之增加.

该reload函数:

• 不 " 追加 "项目,而是重新安排容器中的每个项目.
• 当从结果集中过滤掉项目时,是否可以触发重新加载.

在应用程序的上下文中,我给出了上面的链接,这个问题变得非常容易复制.

我正在寻找一个将使用指令来利用的解决方案:

.masonry('appended', elem) 和 .masonry('prepended', elem)

而不是.masonry('reload')每次都执行.

.masonry('reload') 当从结果集中删除元素时.

编辑

该项目已更新为使用下面的工作解决方案.

在 …