Firebase中的項目未顯示在Angular Grid中

Question

從Firebase取得項目時，讓項目在此網格內顯示時有些困難。 我設法使其與返回靜態數組的自定義服務一起使用。

我知道數據正在到達瀏覽器，因為我可以像這樣將其注銷為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類.grid-img具有opacity:0和visibility:hidden .grid-img是，在開發工具中停用該功能時，它會顯示Firebase中的項目，但不會調整Angular-Grid的大小/樣式。

這可能不是實現此目標的最佳方法，但我正在試驗，認為來自Firebase而不是靜態數組的數據不會產生任何影響。 有人知道這里可能出什么問題嗎？ 感謝所有幫助。謝謝！

Answer 1

文檔中的示例在ul屬性中使用angular-grid="pics" ，在控制器中使用$scope.pics=...

angular-grid =“ pics”定義您要收聽的模型

但是您要設置$scope.data 。 那有什么區別嗎？