javascript - 除非刷新,否则 Firebase 数据不会加载到列表中(AngularJS、Firebase 和 ionic)

标签 javascript angularjs angularjs-directive firebase

我的项目列表未正确加载。我得到一个没有错误的空屏幕,一旦刷新,它们就会全部显示出来。我相信 firebase 数据的检索速度不够快,但我不知道该怎么办。我尝试了很多事情但没有运气。预先感谢您!

app.controller('SpotsCtrl', function($state, $scope, $stateParams) {

var firebaseRef = new Firebase("https://myBrokenApp.firebaseio.com/spots");

firebaseRef.child('0').on('value', function(dataSnapshot){
    console.log("hello");

    $scope.spots = dataSnapshot.val();
    console.log($scope.spots);
})

});

//HTML

<ion-list show-delete="spot.showDelete" show-reorder="spot.showMove"> 

 <ion-item
     class="item-avatar-left item-icon-right item-remove-animate" 
       ng-repeat="spot in spots"
       href="#/tab/spots/{{spot.name}}">

      <h2>{{ spot.name }}</h2>
      <p>{{ spot.title }}</p>
      <p>{{ spot.loc }}</p>
      <i class="icon ion-ios-clock-outline "></i>

       <ion-delete-button ng-click="deleteSpot($index)" 
                        class="ion-minus-circled">
       </ion-delete-button>

      <ion-reorder-button class="ion-navicon"
       on-reorder="moveSpot(spot, $fromIndex, $toIndex)">

      </ion-reorder-button>
 </ion-item>
</ion-list >

最佳答案

尝试将 firebaseref 绑定(bind)到 $firebaseObject。

app.controller('SpotsCtrl', function($state, $scope, $stateParams, $firebaseObject) {

  var firebaseRef = new Firebase("https://myBrokenApp.firebaseio.com/spots");
  $scope.spots = {};
  var spots = $firebaseObject(firebaseRef.child('0'));

  spots.$loaded().then(function() {
    $scope.spots = spots;
    console.log($scope.spots);
  });
});

关于javascript - 除非刷新,否则 Firebase 数据不会加载到列表中(AngularJS、Firebase 和 ionic),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36005730/

相关文章:

javascript - ngView 中指令使用的远程数据存储在哪里? (AngularJS)

javascript - 如何将评估值传递给自定义元素指令?

javascript - 检测输入焦点事件是否由脚本或鼠标点击触发

javascript - Angular : How to get the total for a shopping website

javascript - React 组件不会在更新状态时重新渲染

javascript - 根据键值过滤json

javascript - textarea 高度等于 scrollheight 流问题

javascript - AngularJS Jqlite 之后不添加元素

javascript - 处理计算密集型操作

javascript - Angular 验证器和 ng-maxlength 使用