Firebase存储快照中的数据?

时间:2016-02-04 07:28:05

标签: angularjs angularjs-scope firebase

所以我试图在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一起使用的列表。基本上所有在我的变量中想要的快照中打印到控制台的子项。这对我来说很困惑,因为数据打印到控制台就好了。

1 个答案:

答案 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仍然可以为您处理所有这些。