来自 Firebase 的项目未显示在 Angular 网格中

Question

从 Firebase 获取项目时，我在 this grid 中显示时遇到了一些困难。我设法让它与返回静态数组的自定义服务一起使用。

我知道数据正在到达浏览器，因为我可以像这样 JSON 将其注销。

<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>

但是，这些项目没有出现在视图中，或者我应该说它们在那里，但是 Angular-Grid 及其 CSS 无法像静态数组那样工作。这是代码的主要部分。

控制器

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--
      // test to see 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);
      }

    });

没有任何显示，尽管 JSON 仍然出现。顺便说一句，Angular-Grid class .grid-img 有 opacity:0 和 visibility:hidden 当在开发工具中停用时显示来自 Firebase 的项目但没有 Angular-网格resizing/styling.

这可能不是实现它的最佳方式，但我正在试验并感觉来自 Firebase 而不是静态数组的数据应该不会有什么不同。任何人都知道这里可能出了什么问题？大家帮忙appreciated.Thanks!

Answer 1

documentation 中的示例在 ul 属性中使用 angular-grid="pics"，在控制器中使用 $scope.pics=...。

angular-grid="pics" defines the model you want to listen

但是您正在设置 $scope.data。这有什么区别吗？

来自 Firebase 的项目未显示在 Angular 网格中

Items from Firebase not displaying in Angular Grid

javascript

angularjs

firebase

angular-grid

firebase-realtime-database