Angular JS firebase.(child_ added) 未在页面上呈现 [英] Angular JS firebase.(child_added) not rendering on page

问题描述

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

I have entries in my firebase database that I am trying to get to show up on the html page. The console.log shows the children in the database, but it is not displaying on the page. Here is the code I have:

数据库:

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 显示

console.log shows

user1
user2
user3
....

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

{{h1}} renders correctly, but {{users}} does not render anything. So how can I get each to show up on the page?

推荐答案

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

Firebase asynchronously loads and monitors data. Whenever (new or updated) data is available, your callback function is fired. Unfortunately at that point, AngularJS typically isn't ready to accept the changes anymore. That's why Firebase created AngularFire, which automatically notifies AngularJS when changes happen.

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

You seem to be partially using AngularFire, but not for this construct. I recomment either always using AngularFire for data that needs to be bound to the $scope or never using AngularFire. The choice is yours, but be consistent.

使用 AngularFire:

Using AngularFire:

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

不使用 AngularFire:

Not using 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.

The $timeout construct tells AngularFire that you're modifying the $scope.

请注意，AngularFire 文档的每一部分都涵盖了将数组绑定到作用域的内容 我们有:AngularFire 快速入门，AngularFire 指南 和 AngularFire API 文档.请阅读它们，它们包含许多其他有用的内容.

Note that binding arrays to the scope is covered in every piece of AngularFire documentation we have: the AngularFire quickstart, the AngularFire guide and the AngularFire API docs. Please read them, they contain many other useful bits.

这篇关于Angular JS firebase.(child_ added) 未在页面上呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！