How to bind data of firebase with angularJS scope

Question

Hi how can i bind data that i received from firebase with scope in angularJS. I am new to this and following though w3school. So i am not sure what i am missing. I am using

"angular": "^1.7.2",
"angular-route": "^1.7.2",
"firebase": "^5.2.0",

And my code is like this

app.config(function($routeProvider){
  $routeProvider
  .when('/',{
    templateUrl:'home.html',
    controller:'UserController'
  })
})
app.controller("UserController",  function ($scope, $routeParams, $location) {
    firebaseRef.child('users').on("value", function(response) {
      $scope.userCount=response.numChildren();
  });
})

And in html i am doing like this

<html lang="en" ng-app="my-first-app">
............<HEADER AND TITLE  AND BODY>......
    <h3>User count : {{userCount}} </h3>
</body>
</html>

But nothing is coming even though if I console.log the value of response.numChildren() I see 4.

Can anyone please tell me where I'm doing wrong?

Can you show the complete user html view?

Marcus Höglund
– Marcus Höglund

2018-07-05 19:15:25 +00:00
Commented Jul 5, 2018 at 19:15 — Marcus Höglund
– Marcus Höglund, Commented Jul 5, 2018 at 19:15
@MarcusHöglund, yes i added the html

user7747472
– user7747472

2018-07-05 19:19:41 +00:00
Commented Jul 5, 2018 at 19:19 — user7747472
– user7747472, Commented Jul 5, 2018 at 19:19

Frank van Puffelen · Accepted Answer · 2018-07-05 19:30:02Z

2

By the time your Firebase on("value" callback is invoked, AngualarJS is not expecting changes to the HTML anymore. So you have to explicitly tell it that you're changing the HTML, by using $apply() or $timeout():

app.controller("UserController",  function ($scope, $routeParams, $location) {
    firebaseRef.child('users').on("value", function(response) {
      $timeout(function() {
        $scope.userCount=response.numChildren();
      });
  });
}

Also see:

answered Jul 5, 2018 at 19:30

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user7747472 Over a year ago

Thank you :)) that worked. Seems like something synch and asynchronous behavior of typescript

Marcus Höglund · Accepted Answer · 2018-07-05 19:30:28Z

0

You need to add the ng-view to the view.

Try it like this

var app = angular.module("my-first-app",["ngRoute"]);
app.config(function($routeProvider){
  $routeProvider
  .when('/',{
    template:'<h3>User count : {{userCount}} </h3>',
    controller:'UserController'
  })
})
app.controller("UserController",  function ($scope, $routeParams, $location) {
    $scope.userCount = 3;
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>

<div ng-app="my-first-app">
    <div ng-view></div>
</div>

edited Jul 5, 2018 at 19:30

answered Jul 5, 2018 at 19:22

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

2 Comments

user7747472 Over a year ago

Yes i have added that,, but still the value is not coming.

Marcus Höglund Over a year ago

@user7747472 updated my answer with an example of how to route the html correctly

Collectives™ on Stack Overflow

How to bind data of firebase with angularJS scope

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related