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，但不适用于此构造。对于需要使用 AngularFire 绑定到 $scope 的数据，我建议总是 使用 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 都包含将数组绑定到范围：the AngularFire quickstart、the AngularFire guide 和AngularFire API docs。请阅读它们，它们包含许多其他有用的信息。