我遇到的主要问题是，我正在使用ng-src =“”通过我的JSON文件动态添加图像。我遇到了一个问题，在img元素内部（在html中）ng-src =“”所在的位置它根本没有存储在我存储的图像中。
当我去检查元素时，我在DOM内的元素内部看到ng-src = location / some.png“和src =”location / some.png“。
但是当我只使用src =“”而没有指令时会出现图像，但是当我刷新浏览器时，图像有时会消失，并且会在其他时间重新出现，表现得非常错误。
这里我有一个js提示我的情况和代码如下： http://jsfiddle.net/coder101/c3X7B/4/
HTML：
<div ng-app="indieApp">
<div class="wrap">
<div class="space"></div>
<div id="main" role="main" ng-controller="imageAddCrtl">
<ul id="tiles" class="">
<li ng-repeat="image in imageInfo">
<img ng-src="{{image.path}}" />
</li>
</ul>
</div>
</div>
</div>
的CSS：
.wrap .space {
padding-bottom:10px;
position:relative;
width:100%;
right:0;
top:0;
left:0;
bottom:0;
text-align:center;
margin-top:80px;
}
.wrap #tiles {
list-style-type: none;
position: relative;
/** Needed to ensure items are laid out relative to this container **/
margin: 0;
padding: 0;
}
/**
* Grid items
*/
.wrap #tiles li {
width: 200px;
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
display: none;
/** Hide items initially to avoid a flicker effect **/
cursor: pointer;
padding: 4px;
}
.wrap #tiles li.inactive {
visibility: hidden;
opacity: 0;
}
.wrap #tiles li img {
display: block;
}
JS（这是使用我所拥有的wookmark库的无限滚动，而不是我的问题 知识）
(function ($) {
var $tiles = $('#tiles'),
$handler = $('li', $tiles),
$main = $('#main'),
$window = $(window),
$document = $(document),
options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $main, // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
/**
* Reinitializes the wookmark handler after all images have loaded
*/
function applyLayout() {
$tiles.imagesLoaded(function () {
// Destroy the old handler
if ($handler.wookmarkInstance) {
$handler.wookmarkInstance.clear();
}
// Create a new layout handler.
$handler = $('li', $tiles);
$handler.wookmark(options);
});
}
/**
* When scrolled all the way to the bottom, add more tiles
*/
function onScroll() {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
if (closeToBottom) {
// Get the first then items from the grid, clone them, and add them to the bottom of the grid
var $items = $('li', $tiles),
$firstTen = $items.slice(0, 10);
$tiles.append($firstTen.clone());
applyLayout();
}
};
// Call the layout function for the first time
applyLayout();
// Capture scroll event.
$window.bind('scroll.wookmark', onScroll);
})(jQuery);
在我附上的重要外部图书馆中：
imagesInfo.json - ＆gt;是从我的本地服务器获取图像的地方，因为我将图像存储在图像目录
中controller.js - ＆gt;是我有angularJS信息的地方
angular.js - ＆gt;好吧只需要angular lib
我拥有的其余库仅用于无限滚动功能的图像并设置网格样式布局