Angular JS firebase。(child_added) 未在页面上呈现

Question

我的 firebase 数据库中有一些条目，我正试图让它们显示在 html 页面上。 console.log 显示数据库中的子项，但未显示在页面上。这是我的代码：

数据库：

quiz-show  
    user
        -JuYaVjjm0zY59vK48aR: "user1"
        -JuYaXzrT2-_pfhpr58o: "user2"
        -JuYaZd_oS-hi5zqYLhX: "user3"
        -JuYaaNNd24Icruv18LH: "user4"

控制器：

'use strict';

angular.module('phoneQuizAnswer')
    .controller('testCtrl', function ($scope, $firebaseObject) {
        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('child_added', function(childSnapshot, prevChildKey) {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
        });
    });

html:

{{h1}}
{{users}}

console.log 显示

user1
user2
user3
....

{{h1}} 正确呈现，但 {{users}} 不呈现任何内容。那么我怎样才能让每一个都显示在页面上呢？

Answer 1

Firebase 异步加载和监控数据。每当（新的或更新的）数据可用时，您的回调函数就会被触发。不幸的是，那时 AngularJS 通常还没有准备好接受更改。这就是 Firebase 创建 AngularFire 的原因，它会在发生更改时自动通知 AngularJS。

您似乎部分使用了 AngularFire，但不是为了这个构造。对于需要绑定到 $scope 的数据，我建议总是使用 AngularFire，或者从不 使用 AngularFire。选择权在你，但要始终如一。

使用 AngularFire：

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        $scope.users = $firebaseArray(fireRef);

不使用 AngularFire：

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('value', function(childSnapshot, prevChildKey) {
          $timeout(function() {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
          };
        });

$timeout 结构告诉 AngularFire 你正在修改 $scope.

请注意，AngularFire documentation we have: the AngularFire quickstart, the AngularFire guide and the AngularFire API docs 的每一部分都介绍了将数组绑定到作用域。请阅读它们，它们包含许多其他有用的位。

Angular JS firebase。(child_added) 未在页面上呈现

Angular JS firebase.(child_added) not rendering on page

angularjs

firebase