Question

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

DB：

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将总是用于需要使用AngularFire绑定到$scope 或从不的数据。选择是你的，但要保持一致。

使用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都涵盖了将数组绑定到范围。请阅读它们，它们包含许多其他有用的内容。

Angular JS firebase。（child_added）不在页面上呈现

1 个答案: