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

【问题标题】：How do I set returned Firebase data to a $scope variable in AngularJS?如何将返回的 Firebase 数据设置为 AngularJS 中的 $scope 变量？
【发布时间】：2016-10-06 13:46:37
【问题描述】：

我想做的事：

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

使用 Javascript SDK 而不是 Angularfire https://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.'
    }
}

【问题讨论】：

标签： javascript angularjs firebase firebase-realtime-database angularfire

【解决方案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 知道更新。

【讨论】：

【解决方案2】：

您当然可以在具有正确语法的对象上使用带有ng-repeat 的对象。 ng-repeat documentation page 对此进行了解释。

例如：

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

但这会破坏项目的顺序，因此绝对不推荐这样做。相反，您应该使用forEach 方法以正确的顺序迭代孩子，然后自己构建数组。

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

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

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

【讨论】：

非常感谢！ @vzsg