I am encountering an issue with my scope function in the controller, where it calls an API to retrieve data from the database. The problem arises when I use this scope function within ng-repeat and run the application as it ends up getting stuck.
Here is a snippet of the view:
<div class="col-xs-4 product-padding" ng-repeat="product in productList | filter:query | orderBy:'name'| offset: currentPage*itemsPerPage | limitTo: itemsPerPage " ng-cloak>
<div class="theme-04-scope">
<div class="thumbnail">
<small class="defaultImageSize" ng-if="checkImageAttribute(product.ItemAttributes) == true">
<img class="ui-corner-all img-responsive defaultImageSize" ng-src="data:image/jpeg;base64,{{loadProductImage(product.ItemAttributes)}}" />
@*ng-src="/Product/LoadProductImage/{{loadProductImage(product.ItemAttributes)}}?width=200&height=144"*@
</small>
</div>
</div>
</div>
Angularjs controller code:
// Function to load product image.
$scope.loadProductImage = function (itemAttributes) {
var imageId = 0;
$.each(itemAttributes, function (index, data) {
if (data.AttributeId == 1000700 && data.DataXml != null) {
imageId = data.DataXml;
return false;
}
});
productRepository.getProductImage(imageId, 200, 144).then(function (imageArrary) {
$scope.itemIdArr.push(imageId);
$scope.productImage = imageArrary;
});
return $scope.productImage;
}
And here is the repository function:
getProductImage: function (imageId, width, height) {
var deferred = $q.defer();
$http.post('/Product/LoadProductListImage', JSON.stringify({ id: imageId, width: width, height: height })).success(deferred.resolve).error(deferred.reject);
return deferred.promise;
}