Angular 和 Firebase 列表未更新答案

【问题标题】：Angular & Firebase list not updatingAngular 和 Firebase 列表未更新
【发布时间】：2016-09-22 22:02:55
【问题描述】：

我是 Angular 和 Firebase 的新手。我一直在尝试创建一个工厂来更新我的电台列表，但该列表似乎不会更新。当我在控制器中运行工厂代码firebase.database... 时，它可以正常工作。

controller

.controller('DashCtrl', function ($scope,Stations) {

        $scope.stations = [];
        $scope.stations = Stations.getStations();
    })

services

.factory('Stations', function() {
    return {
        getStations : function(){
            firebase.database().ref('stations').once('value',function(snapshot){
                console.log(snapshot.val());
                return snapshot.val();
            })
        }
    }
})

我做错了什么？工厂返回新数据后，ng-repeat="(key,station) in stations"列表不应该改变吗？

我也注意到一些教程中的一些东西。以下2个init有什么区别。

.controller('DashCtrl', function ($scope,Stations) {

        $scope.stations = [];
        $scope.stations = Stations.getStations();
    })

.controller('DashCtrl', [$scope,Stations,function ($scope,Stations) {

        $scope.stations = [];
        $scope.stations = Stations.getStations();
    }])

【问题讨论】：

只是为了明确编辑，问题不在于数据库不返回任何内容，而是在返回时更新 ng-repeat 列表

标签： angularjs ionic-framework firebase firebase-realtime-database

【解决方案1】：

由于您没有使用 Angular 承诺包装 firebase 结果，因此 Angular 环境不会注意到有新结果到达，您有两种解决方案：

使用 Angular Fire 为 firebase 提供角度绑定

用$q 承诺包装返回结果：

//controller 
.controller('DashCtrl', function ($scope,Stations) {
    $scope.stations = [];
    Stations.getStations().then(function(results){
        $scope.stations = results;
    });
 })

//service
.factory('Stations', function($q) {
    return {
        getStations : function(){
            var defer = $q.defer();
            firebase.database().ref('stations').once('value').then(function(snapshot){
                defer.resolve(snapshot.val());
            }).catch(function(error){
                defer.reject(error);
            })
            return defer.promise;
        }
    }
})

【讨论】：

好的，我知道了，但如果我想使用once，我会使用这个。 on 呢？我怎么能让控制器知道从 Stations 工厂更新列表？

【解决方案2】：

控制器 #1

.controller('DashCtrl', function ($scope,Stations) {

    $scope.stations = [];
    $scope.stations = Stations.getStations();
})

控制器 #2

.controller('DashCtrl', [$scope,Stations,function ($scope,Stations) {

    $scope.stations = [];
    $scope.stations = Stations.getStations();
}])

controller #2 更适合由浏览器完成的minification，结果如下：

controller2.min.js

.controller('DashCtrl', [a,b, function(a,b) {

a.stations = [];
a.stations = b.getStations();
}])

【讨论】：