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

【问题标题】：CSS is not applied properly to AngularJS dynamically loaded elementsCSS 未正确应用于 AngularJS 动态加载的元素
【发布时间】：2015-06-16 00:23:57
【问题描述】：

我正在使用 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 应用于动态和静态元素的问题。提前感谢您的帮助。

【问题讨论】：

你能在 plnkr 中重现这个吗？
另外，这听起来很愚蠢，但你确实在 ul 标签内有 ng-repeatable li 标签，对吧？
是的@Tom，这是
- 。这是 Plunker：plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview

标签： css angularjs

【解决方案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?

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

【讨论】：