让 AngularJS + JQuery Isotope + 动态内容一起玩得很好答案

【问题标题】：Making AngularJS + JQuery Isotope + Dynamic content play well together让 AngularJS + JQuery Isotope + 动态内容一起玩得很好
【发布时间】：2013-01-13 00:53:43
【问题描述】：

在我的页面中，AngularJS 的 html 模板像往常一样绑定到控制器的变量。我正在使用 WebSockets，当我收到一个新项目时，我会更新范围的值并调用 angular 的 $apply。这工作正常，AngularJS 正确更新视图呈现添加/删除的任何新项目...

棘手的部分是将Isotope 插件加入其中。由于内容是动态的，因此向 Isotope (http://isotope.metafizzy.co/docs/adding-items.html) 添加项目并不简单，原因如下：

在更新控制器的数据和调用 apply angular 时会创建所需的其他元素。
同位素要求您知道要添加的每个项目。
我认为 AngularJS 没有办法告诉控制器创建了什么 html 项。

有没有人让这 3 个部分一起工作？有没有办法创建 HTML 以便将其传递给 Isotope？

【问题讨论】：

让 jQuery isotope 和 AngularJS 一起玩并不总是那么简单，我实现了同位素的原生 AngularJS 替代品（正在进行中）：tristanguigue.github.io/angular-dynamic-layout 在这种情况下，您不必担心拥有查看您的项目以了解是否已插入任何项目，因为该指令会针对控制器提供的项目的任何更改触发布局。

标签： jquery websocket angularjs dynamic-data jquery-isotope

【解决方案1】：

我假设您正在使用 ng-repeat 来生成视图/HTML。

您可以尝试以下方法：创建一个指令并将其附加到 ng-repeat(s) 所在的相同元素。设置指令的priority 使其最后运行（或在其他指令之后）。让指令的链接函数监视您因 Web 套接字信息而更新的相同 $scope 属性（或者我想您可以在每次更改时在范围上创建某种计数器 - 观察该计数器指令）。当指令/监视检测到更改时，提取新的 HTML（通过链接函数的element 属性）并将其发送到同位素。

您可能需要在控制器中设置一些范围属性，以便监视回调可以访问以确定添加/删除了哪些项目。

link: function(scope, element, attrs, someController) {
    scope.$watch(..., function(newValue) {
       // extract HTML with Angular or jQuery
       var children = element.children();
       for(i=scope.first_new_item; i<= scope.last_new_item; i++) {
           $('#isotope_container').isotope('insert'), children[i]);
       }
       // handle removed items similarly ??
    }

contents() 可能比 children() 更有效，或者使用 jQuery 选择器。

【讨论】：

这是个好主意。谢谢。尚未在 Angular 中使用链接阶段，但现在是尝试的好时机。我最终使用了 jQuery 选择器和其他一些变体来适应我的用例，你的想法很好用！ :D

【解决方案2】：

在这条路上遇到了一些麻烦，很高兴找到这个，马克的解决方案是正确的。

如果同位素元素的高度是动态的并且取决于图像，imagesLoaded 库会很有帮助。

【讨论】：