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

【字号: 日期:2024-04-10浏览:46作者:雯心
(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决Angular JS firebase(child_added)未在页面上呈现?

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文档中都涉及到将数组绑定到作用域:AngularFire快速入门,AngularFire指南和AngularFireAPI文档。请阅读它们,它们包含许多其他有用的位。

解决方法

我的Firebase数据库中有一些条目,这些条目正试图显示在html页面上。console.log显示数据库中的子级,但未显示在页面上。这是我的代码:

D B:

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

user1user2user3....

{{h1}}正确渲染,但{{users}}不渲染任何东西。那么如何让每个人都显示在页面上?

相关文章: