Почему отклик базы данных Firebase в реальном времени не отражает html в angularjs

Question

Я пытаюсь отобразить ответ базы данных реального времени Firebase на HTML-страницу с AngularJS следующим образом: {{ pps }}.

Controller.js

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
    $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
    console.log($scope.pps);
});

index.html

<h1>{{ pps }}</h1>

Проблема в том, что внешнее значение HTML не отображается, когда я нашел значение внутри console.log Пожалуйста, дайте мне знать, что я пропустил в коде.

Answer 1

Если вы новичок в использовании Angular 1 + Firebase, я бы порекомендовал вам попробовать AngularFire.Он лучше интегрируется, чем ваш ванильный угловой подход.

Проверьте это здесь.

https://github.com/firebase/angularfire/blob/master/docs/quickstart.md

Peace.

Answer 2

Вы можете попробовать приведенное ниже решение.

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
    $timeout(function() {
        $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
    });
});

Теперь, почему это?
На самом деле, событие будет происходить $apply scope как out scope, поэтому нужно указывать угловойчто есть какое-то событие для обработки.Вы можете сделать это через $timeout или попробовать $apply scope.

Здесь я использую $timeout, потому что это не выдаст ошибку, даже если он будет поддерживать поток, пока происходит событие из firebase.

Answer 3

Используйте $scope.$apply, чтобы сообщить угловым об изменениях.

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
  $scope.$apply(() => {
    $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
    console.log($scope.pps);
  });
});