I'm struggling to populate items within this grid sourced from Firebase. I was able to make it work with a custom Service that returned a fixed array.
I can confirm that the data is being received by the browser as I can log it out in JSON format like this.
<pre>
{{ data | json }}
</pre>
HTML
<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false">
<li data-ng-repeat="item in data" class="grid">
<img src="{{item.url}}" class="grid-img" data-actual-width="{{item.width}}" data-actual-height="{{item.height}}" />
</li>
</ul>
However, the items are not visible on the view, or rather they appear but Angular-Grid and its CSS do not function as expected when compared to using a static array. Here is a snippet of the main code.
Controller
var list = iService.getItems().$loaded()
.then(function(list) {
var cnt = list.length;
//console.log("cnt ", cnt);
angular.forEach(list,function(image,index){
//console.log('Item: ', list[index]);
var imageTemp = new Image();
imageTemp.onload = function(){
list[index].height = this.height + 'px';
list[index].width = this.height + 'px';
};
imageTemp.src = image.url;
cnt--
// check if all items have been iterated before setting $scope.data
if(!cnt){
console.log("done....", cnt);
console.log("ere ", list);
$scope.data = list;
} else {
console.log("Current cnt ", cnt);
}
});
No items are displayed even though the JSON output is still present. Interestingly, the Angular-Grid class .grid-img has styles like opacity:0 and visibility:hidden which, when removed in dev tools, reveal the Firebase items without the Angular-Grid effects.
This might not be the most optimal approach, but I am experimenting and believe that using data from Firebase instead of a static array should not cause any issues. Any suggestions on what might be going wrong here? Any assistance would be greatly appreciated. Thank you!