2 角度绑定方式不适用于firebase

Question

我正在尝试显示我的 firebase 数据库中的产品列表，但 2 路绑定对我不起作用。 $scope.products 会更新并在控制台上打印，但不会在 UI 上更新。

app.controller("productManagerController", ["$scope", function ($scope) {
    $scope.products = [];
    db.ref("products").once('value').then(function (snapshot) {
        const values = snapshot.val()
        for (key in values) {
            values[key].id = key;
            $scope.products.push(values[key])
        }
        console.log($scope.products) // Logs the values that have been taken from firebase
                                    // But doesn't update on the UI
    })
}])

Answer 1

只是为了扩展 Sajeetharan 的答案，this article 很好地解释了为什么调用 $scope.$apply() 可以解决问题。

什么时候手动调用 $apply()？

如果 AngularJS 通常将我们的代码包装在 $apply() 中并开始一个 $digest 循环，那么您什么时候需要手动调用 $apply() 呢？实际上，AngularJS 很清楚地说明了一件事。它将仅考虑在 AngularJS 上下文中完成的那些模型更改（即更改模型的代码包含在 $apply() 中）。 Angular 的内置指令已经这样做了，因此您所做的任何模型更改都会反映在视图中。但是，如果您在 Angular 上下文之外更改任何模型，则需要通过手动调用 $apply() 来通知 Angular 更改。这就像告诉 Angular 你正在更改一些模型，它应该触发观察者以便你的更改正确传播。

所以本质上，db.ref(..)... 调用没有包含在 $apply 中，因为它不在 AngularJS 的上下文中，因此，您必须自己调用它。

Answer 2

使用 firebase，您始终可以尝试使用 $scope.$apply(); 手动应用更改

 $scope.products.push(values[key])
 $scope.$apply();