AngularJS，在視圖中更改數據而div不消失

Question

我正在AngularJS進行一些向導/調查，將數據加載到變量$scope.styles 。 為了方便使用，我在這里設置了一個插件：

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”，或者最好是一個類）。

這樣一來，當圖像更改並且圖像行數少於三行時，包裝器將保持固定大小。