CODEWITHSUNDEEP
javascriptangularjsangularjs-directivefirebase
Sarah Yonig
Sarah Yonig

Reputation: 13

Firebase data not loading in list unless refreshed (angularJS, firebase & ionic)

My list of items are not loading properly. I get an empty screen with no errors and once I refresh, they all show up. I believe the firebase data is not being retrieved fast enough but I dont know what to do. I tried multiple things with no luck. Thank you in advance!

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 >

Upvotes: 1

Views: 628

Answers (1)

aup
aup

Reputation: 810

Try binding you firebaseref to a $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);
  });
});

Upvotes: 1

Related Questions