css - AngularJS View 渲染问题

Question

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

当 Angular 加载页面时，数据就在那里，但元素似乎仍然是空的(底部)。

即使我在 Chrome 开发工具中进行最细微的调整，元素也会卡入到位，但如果不使用 CSS 使它们成为静态大小，我就无法让它们预填充，这不起作用，因为文本大小不同。有问题的元素具有内联 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 指令，以防万一。

关于如何让 View 填充元素有什么想法吗？

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

Answer 1

我无法弄清楚“..数据仍然存在但元素是空的..”到底是什么意思 - 我发现 AngularJS 渲染的唯一问题是“审查”(按钮？)被数字覆盖。

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

即替换:

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

与

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

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