3

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

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

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

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

4

2 回答 2

4

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

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

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

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 选择器。

于 2013-01-13T04:22:44.127 回答
0

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

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

于 2013-08-04T20:47:50.760 回答