CSS未正确应用于AngularJS动态加载的元素

Question

我使用CodyHouse的这个好脚本来设置可过滤的投资组合：http://codyhouse.co/demo/content-filter/

我使用AngularJS通过JSON解析数据，一切都很好，除了CSS没有正确应用于动态加载的元素。

您可以在此图片中看到差异：

如您所见，通过Angular加载的第一行根本没有应用css。已经放在HTML中的第二行工作正常。

怎么可能？两行中的所有元素都具有相同的CSS选择器并应用了相同的CSS规则。

在这里你可以找到一个Plunker：http://plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview

这是Angular生成的标记：

<li class="mix color-1 check1 radio2 option3 ng-scope" style="display: inline-block;" ng-repeat="drawing in drawings"><img src="img/img-1.jpg" alt="Image 1"></li>

这是html静态标记：

<li class="mix color-1 check1 radio2 option3" style="display: inline-block;"><img src="img/img-1.jpg" alt="Image 1"></li>

这是应用的css：

.cd-gallery ul { text-align: justify; }
.cd-gallery li { width: 23%; }

他们之间完全没有区别，我对此感到有点疯狂。这是我第一次遇到动态和静态元素应用的css问题。提前感谢您的帮助。

Answer 1

好的，我找到了问题的解决方案。

基本上，（正当理由所必需的）之间的空格不是用Angular的重复发出的，所以你还必须包装空格以便重复，如：

<span ng-repeat-start="drawing in drawings"></span>
    <li></li>
<span ng-repeat-end></span>

感谢这个主题：Angular: Why doesn't CSS justification work with ng-repeat?

当然它并不是最佳的，因为它会迫使你添加大量无用的标记，但至少它是有效的。如果有人能提出最佳解决方案，我们将不胜感激。