如何在AngularJS中将返回的Firebase数据设置为$scope变量

Question

我要做的事情：

我想输出主页上图书节点中的所有图书。我需要的是一个对象数组，其中包含book节点中的所有书籍，这样我就可以使用AngularJs中的ng repeat指令循环遍历它们。在下面的代码中，当我控制台记录数据时，我会得到一个对象的对象，它不能与ng repeat一起使用。我遇到的另一个问题是，当我试图将$scope.allBooks变量输出到页面上时，什么都没有出现。有人能帮我吗？

使用Javascript SDK而非Angularfirehttps://firebase.google.com/docs/

// Main Controller
firebase.database().ref('books').on('value', function(snapshot) {
    var data = snapshot.val();
    $scope.allBooks = data;
    console.log(data);
});

// Book Node in Firebase
books : {
    id : {
        title: 'The Hunger Games',
        author: 'Suzanne'
    },
    id : {
        title: 'Harry Potter and the Order of the Phoenix',
        author: 'J.K.'
    }
}

Answer 1

如果你不想使用angularfire，你需要让angular知道运行更新。

// Main Controller
firebase.database().ref('books').on('value', function(snapshot) {
    var data = snapshot.val();
    $scope.allBooks = data;
    console.log(data);
    $scope.$apply();
});

只需添加$scope.$apply()即可让angular知道更新。

Answer 2

您当然可以在具有正确语法的对象上使用带有ng-repeat的对象。这在ng repeat文档页面上有解释。

例如：

<div ng-repeat="(key, value) in myObj"> ... </div>

但这会破坏项目的顺序，所以这绝对不是一个推荐的方法。相反，您应该使用forEach方法以正确的顺序迭代子级，并自己构建数组。

---

如果您直接使用Firebase JS SDK，Angular将不会收到数据更改的通知。您必须手动触发摘要循环，以便可以重新评估作用域。

其中一种方法是使用$timeout来包装作用域操作。这在旧的Firebase文档中被命名为最佳实践。

   // Main Controller
   firebase.database().ref('books').on('value', function(snapshot) {
       var data = snapshot.val();
       console.log(data);
       $timeout(function() {
           $scope.allBooks = data;
       });
   });