AngularFire $getRecord returns null after page refresh

Question

I'm having an issue and I don't understand why it happens. Part of my application is a blog using AngularFire. When accessing a single blog post I use $getRecord(key) method to retrieve data from Firebase. The key parameter is retrieved via UI-Router's $stateParams object.

I'm able to display datas in my post.single.html view but when I refresh, the datas disappear and the $getRecord(Key) returns null whereas the $stateParams's value is correct. Here's the code:

/* PostCtrl*/

'use strict';

angular
    .module('meetTerry')
    .controller('PostCtrl',['$scope','$stateParams','BlogFactory', function ($scope,$stateParams, BlogFactory) {
       $scope.data = BlogFactory.loadPost($stateParams.postId);
    }]);

/* BlogFactory*/

'use strict';

angular
    .module('meetTerry')
    .factory('BlogFactory', ['$firebaseArray',function ($firebaseArray) {
        var postRef = new Firebase('https://firebase-forge/posts');
        var postArray = $firebaseArray(postRef);

        /***********************LOAD SINGLE***********************************/

        var _loadPost = function (recordKey) {
            var records = postArray.$getRecord(recordKey);
            return records;
        };

        return {
          loadPost: _loadPost
         }
      }]);

<div class="container" ng-controller="PostCtrl">
    <div class="row">
        <div class="small-12">
            <h1>{{data.title}}</h1>
            <p>{{data.content}}</p>
        </div>
    </div>
</div>

If anyone has a clue...

[Async, you slayer of developer dreams](http://stackoverflow.com/questions/27049342/impossible-to-access-array-with-angular-and-firebase). (Hint: it hasn't loaded yet) But iIf you already have the post id, just fetch it directly, you don't need an array of all posts. `$firebaseObject(postRef.child( recordKey ))` — Kato, Apr 17 '15 at 22:51
Thank you for the answer and for the helpful post @Kato it works great now — t3__rry, Apr 18 '15 at 23:48

score 4 · Answer 1 · answered Jun 26 '16 at 17:48

When the data has been downloaded from Firebase, make sure that the promise is resolved when you call the $getRecord function, you can use $loaded() on the promise.

   angular
   .module('meetTerry')
   .factory('BlogFactory', ['$firebaseArray', '$rootScope', function ($firebaseArray, $rootScope) {

       var postRef = new Firebase('https://firebase-forge/posts');
       var postArray = $firebaseArray(postRef);
       var obj = $firebaseObject(postRef);  

       obj.$loaded().then(function() { 
          // Broadcast your post and catch up at any controller
          $rootScope.$broadcast('loadPost',postArray.$getRecord(recordKey));               
       });

   });

Using $scope.$broadcast will fire an event down the $scope. Using $scope.$on is how we listen for these events. Now you can use it across controllers via catch up the "loadPost" event.

// listen for the event in the relevant $scope
$scope.$on('loadPost', function (event, data) {
   console.log(data); 
});

AngularFire $getRecord returns null after page refresh

1 Answers1