AngularJS，在没有div消失的情况下更改视图中的数据

Question

我在AngularJS中进行了一个小向导/调查，将数据加载到变量$scope.styles。我在这里设置了一个易于使用的plunkr：

http://plnkr.co/edit/1S542YE7xlO2P4zyhzu0?p=preview

非常简单。我连续向用户显示每个对象，加载到相关图像中并为用户显示它们。点击它在下一个图库中加载的图像底部的“是/否”。这里刷新之间存在很大的延迟（Plunkr似乎很快加载它，但在我的生产服务器上并非如此，因此它更加显着），这导致窗口大小暂时小得多，加上所有内容低于ng-repeat跳到屏幕顶部。

防止这种情况发生的最佳方法是什么？ CSS是唯一的解决方案吗？

Answer 1

您的问题是<img>元素的大小为0，直到用户的浏览器加载图像文件为止。尝试将图片代码更改为<img ng-src="{{img}}" width="100" height="100"/>，您会发现没有更多的闪烁。如果可能，让服务器使用图像URL数据返回这些属性。

Answer 2

您可以为图像包装div添加高度（style =“height：300px”或更好，作为一个类）。

这样，当图像改变时以及当你有少于三行的图像时，包装器将保持固定大小。