Javascript Firebase中的项目未显示在角度网格中

从Firebase获取物品时，我在获取物品以显示内部时遇到一些困难。我设法让它与一个返回静态数组的定制服务一起工作

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

<pre>
{{ data | json }}
</pre>

没有显示任何内容，尽管JSON仍然出现。顺便说一句，角度网格类

.Grid img

具有

不透明度：0

和

可见性：隐藏

，当在开发工具中停用时，显示Firebase中的项目，但不调整角度网格的大小/样式

这可能不是实现它的最佳方式，但我正在试验，觉得来自Firebase而不是静态数组的数据应该不会有什么不同。有人知道这里会出什么问题吗？感谢您的帮助，谢谢

中的示例在

ul

属性中使用

angular grid=“pics”

，在控制器中使用

$scope.pics=…

angular grid=“pics”定义您要收听的模型

但是您正在设置

$scope.data

。这有什么区别吗？

中的示例在

ul

属性中使用

angular grid=“pics”

，在控制器中使用

$scope.pics=…

angular grid=“pics”定义您要收听的模型

---

但是您正在设置

$scope.data

。这有什么区别吗？

为什么创建

imageTemp

但不使用它，或者我遗漏了什么？@搜索角度网格，如砖石，需要每个图像的尺寸，然后才能确定正确的布局。Firebase对象有一个图像URL，但每个图像的尺寸事先不知道。因此，在将整个列表数组添加到

$scope.list

之前，我决定创建一个临时图像对象，以获取并存储每个图像的维度，即它在

forEach

中各自的列表对象。同样，这可能不是最好的方法，但当我使用静态数组时，它似乎工作得很好。希望这是有意义的。为什么你创建了

imageTemp

，但没有使用它，或者我遗漏了什么？@搜索角度网格，如砖石，需要每个图像的尺寸，然后才能确定正确的布局。Firebase对象有一个图像URL，但每个图像的尺寸事先不知道。因此，在将整个列表数组添加到

$scope.list

之前，我决定创建一个临时图像对象，以获取并存储每个图像的维度，即它在

forEach

中各自的列表对象。同样，这可能不是最好的方法，但当我使用静态数组时，它似乎工作得很好。希望这是有道理的。那就解决了！！我假设该属性是角度栅格的某种内部设置。哼！斑点很好。非常感谢你！没问题：）小事情总是最难发现的！这就解决了！！我假设该属性是角度栅格的某种内部设置。哼！斑点很好。非常感谢你！没问题：）小事情总是最难发现的！

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

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);
      }

    });