角JS火力点。（child_added）未呈现网页 [英] Angular JS firebase.(child_added) not rendering on page

问题描述

我在我火力的数据库，我试图去显示HTML页面上的条目。所述的console.log示出在数据库中的孩子，但它没有显示在网页上。这里是code我有：

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:

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

console.log shows

user1
user2
user3
....

{{} H1} 渲染正确，但 {{}用户} 不呈现任何内容。那么，如何可以获取每个显示在页面上？

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

推荐答案

火力地堡异步加载和监测数据。每当（新的或更新）的数据是可用的，你的回调函数被触发。不幸的是在这一点上，AngularJS通常是不准备再接受更改。这就是为什么火力地堡创建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，但不能用于该构建。我电子书籍的要么始终的使用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();
          };
        });

的 $超时构造告诉你修改 $范围AngularFire 。

注意结合阵列的范围是覆盖在每一块 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.

这篇关于角JS火力点。（child_added）未呈现网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！