Question

我对Angular＆amp; amp;火力地堡。我一直在尝试创建一个工厂来更新我的工作站列表，但这个列表似乎还没有更新。当我在我的控制器中运行工厂代码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个内容之间有什么区别。

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

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

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

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

Answer 1

由于你没有用Angular承诺包装firebase结果，角度环境无法注意到有新的结果到达，你有两个解决方案：

使用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;
        }
    }
})

Answer 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();
}])

控制器＃2更适合浏览器完成缩小，结果如下：

controller2.min.js

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

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

Angular＆amp; Firebase列表未更新

2 个答案: