AngularJS视图渲染问题答案

【问题标题】：AngularJS view rendering issueAngularJS视图渲染问题
【发布时间】：2013-12-25 14:33:29
【问题描述】：

我正在使用 ng-view 在我的页面上呈现动态数据。当页面加载时，如果我使用静态 html，我会得到这个（顶部）：

当 Angular 加载页面时，数据就在那里，但就像元素仍然是空的（底部）。

如果我在 Chrome 开发工具中进行最轻微的调整，项目就会卡入到位，但如果不使用 CSS 使它们成为静态大小，我就无法让它们预填充，这不起作用，因为文本大小不同。有问题的元素具有 inline-block 的 CSS。

正如您在此屏幕截图中看到的，我尝试了两种填充数据的方法，结果都相同：

<div class="cd-rating" ng-class="caseData.scoreClass">
    <span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
    <span class="verdict">{{caseData.recommendation}}</span>
</div>

这是 HTML 在浏览器中的样子：

<div class="cd-rating medium" ng-class="caseData.scoreClass">
    <span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
    <span class="verdict ng-binding">review</span>
</div>

如果我以相同的方式对该 HTML 进行硬编码，那么它会完美呈现。只有当 Angularjs 渲染它时，元素才会被折叠，如果没有内容就会出现。

我还想补充一点，我正在使用 RequireJS 并手动引导应用程序，而不是使用 ng-app 指令，以防万一。

关于如何使视图填充元素的任何想法？

编辑：这是一个演示该行为的视频：http://youtu.be/zTwv-o6mWRM

【问题讨论】：

如果您将代码集成到您的问题中而不是引用它的图像，这将更容易解决。 SO上有代码格式——使用`字符将代码like so括起来，或者将代码缩进4个空格。此外，它使您的问题独立于 SO，因此如果托管图像失效，问答仍然相关。
是的，一定要发布一些代码，jsfiddle 或 plunker 上的示例会更好。从您的屏幕截图中，在我看来，实际上有一个额外的空白元素将您显示的元素推过，而不是缺少元素。我错过了什么吗？
不幸的是，由于应用程序的复杂性和我们使用的无法公开访问的后端 API，jsfiddle 并不是一个真正的选择。问题是元素看起来是空的，好像没有内容一样。这是确切的元素，只是页面似乎认为它是空的。很抱歉浪费您的时间。
添加了更多注释、代码和显示该行为的视频。谢谢。

标签： css layout angularjs

【解决方案1】：

我无法弄清楚您所说的“..data 仍然存在，但元素为空..”究竟是什么意思 - 我发现 AngularJS 渲染的唯一问题是“评论”（按钮？）被数字覆盖。

查看您的代码（正如@Wingman4l7 建议的那样，需要将其发布在问题中而不是图像中），我发现您正在使用绑定来动态定义一个类。相反，您可以使用ng-class 指令并查看它是否可以解决问题？

即替换：

<div class="cd-rating {{caseData.scoreClass}}">

与

<div class="cd-rating" ng-class="caseData.scoreClass">

而是检查问题是否得到解决？

【讨论】：

我试过了并更新了上面的代码。仍然没有工作。还发布了该问题的视频。感谢您的宝贵时间。