Question

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

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

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

有没有人得到这3件一起工作？有没有办法获取HTML，以便将其传递给Isotope？

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

Answer 2

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

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

使AngularJS + JQuery同位素+动态内容很好地协同工作

2 个答案: