Как связать данные из firebase с помощью angularJS scope - PullRequest
Новая
       10

Как связать данные из firebase с помощью angularJS scope

0 голосов
/ 05 июля 2018

Привет, как я могу связать данные, полученные от firebase, с областью действия в angularJS. Я новичок в этом и следую, хотя w3school . Так что я не уверен, что мне не хватает. Я использую 

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

А мой код такой 

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();
  });
})

И в HTML я делаю так 

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

Но ничего не произойдет, даже если я console.log значение response.numChildren() Я вижу 4.

Может кто-нибудь сказать, пожалуйста, где я делаю неправильно?

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

К тому времени, когда ваш обратный вызов Firebase on("value" вызывается, AngualarJS больше не ожидает изменений в HTML. Таким образом, вы должны явно указать ему, что вы меняете HTML, используя $apply() или $timeout(): 

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

Также см .:

0 голосов
/ 05 июля 2018

Вам необходимо добавить ng-view в представление.

Попробуй вот так 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...