Load data from Firebase using AngularJS immediately

Question

I am trying to make a comments section on my website. I have properly linked all my files and getting data from Firebase is working. But, the comments only load after I either click on something or enter text in the "Add comment" field; it does not show the comments instantly when the page loads. Does anyone know why?

Relevant code: (placed at the top of my controller)

$scope.comments = {};
database.ref('comments').on('value', function(items) {
  $scope.comments = items.val();
});
$scope.comment = function() {
  database.ref('comments').push($scope.newComment);
  $scope.newComment = "";
};

See http://stackoverflow.com/questions/35531161/taking-long-to-load/35533455#35533455 — Frank van Puffelen, Aug 19 '16 at 18:50

score 1 · Accepted Answer · answered Aug 19 '16 at 15:39

1

Use $scope.$apply

$scope.comments = {};
database.ref('comments').on('value', function(items) {  
   $scope.$apply(function () {
        $scope.comments = items.val();
   });
});
$scope.comment = function() {
database.ref('comments').push($scope.newComment);
    $scope.newComment = "";
};

answered Aug 19 '16 at 15:39

Aditya Ch

26
4

1

You should add a bit of explanations. – Nicolas Henneaux Aug 19 '16 at 15:47
@Aditya: I agree with Nicolas. This fixes my problem, but could you please explain what `$scope.$apply` does? – Neil A. Aug 19 '16 at 20:42

Load data from Firebase using AngularJS immediately

1 Answers1