AngularJS视图渲染问题

时间:2013-07-24 23:21:58

标签: css layout angularjs

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

enter image description here

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

如果我在Chrome开发工具中进行了最轻微的调整,那么这些项目就会卡入到位,但是我不能让它们预先填充而不使用CSS来使它们成为静态大小,这不起作用,因为文本大小不同。有问题的元素具有内联块的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

1 个答案:

答案 0 :(得分:0)

我无法弄清楚你的意思是什么“..数据仍在那里,但元素是空的......” - 我发现AngularJS渲染的唯一问题是“评论”(按钮?)被数字覆盖。

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

即,替换:

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

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

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