所以我试图在API之后存储来自快照的数据。此代码打印我要保存到控制台的两个字符串。但是,我还没有能够将它们存储在应用程序页面上显示的范围内。我想知道为什么我无法存储这些数据,以及是否有任何解决方法。
$scope.collectionList = [];
//Loading up the publically available quote collections
var publicCollectionsRef = new Firebase(FIREBASE_URL + 'publicData/Collections/');
publicCollectionsRef.once("value", function(snapshot) {
// The callback function will get called twice, once for "fred" and once for "barney"
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
console.log(String(key));
$scope.collectionList.push(String(key));
});
});
我试图显示数据列表...我希望collectionList是一个可以与ng-repeat一起使用的列表。基本上所有在我的变量中想要的快照中打印到控制台的子项。这对我来说很困惑,因为数据打印到控制台就好了。
答案 0 :(得分:3)
这是Angular不了解外部库的老问题。为了使您当前的代码正常工作,您必须将.once()
中的代码包装在$timeout
中。
$scope.collectionList = [];
//Loading up the publically available quote collections
var publicCollectionsRef = new Firebase(FIREBASE_URL + 'publicData/Collections/');
publicCollectionsRef.once("value", function(snapshot) {
// inject timeout into your controller
$timeout(function() {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
console.log(String(key));
$scope.collectionList.push(String(key));
});
});
});
但是,你不应该这样做。
Use AngularFire。 Firebase(我是其中的员工),创建了自己的Angular集成(我是其中的维护者)。
在您的情况下,您正在尝试同步数组。这正是AngularFire所做的事情。
angular.module('app', ['firebase']) // include AngularFire
.constant('FirebaseUrl', '<my-firebase-app>')
.service('rootRef', ['FirebaseUrl', Firebase])
.factory('collectionList', CollectionList)
.controller('MyCtrl', MyController);
function CollectionList(rootRef, $firebaseArray) {
var collectionRef = rootRef.child('publicData/Collections/');
return $firebaseArray(collectionRef);
}
function MyController($scope, collectionList) {
$scope.collectionList = collectionList;
}
AngularFire会为您处理阵列同步。在collectionList
工厂中,您可以根据数据的位置创建$firebaseArray
。
此代码的唯一区别是它不使用.once()
,它使用了.on()
。因此,您将获得实时更新阵列,但AngularFire仍然可以为您处理所有这些。