异步回调返回null

Question

我正在尝试分配回调函数值并显示ng-repeat

var myApp = angular.module('mybet',[]);

myApp.controller('MyBetController', function($scope,$firebase,ProfileFactory,MybetFactory){

    $scope.myBetEvents = MybetFactory.getUsersBetsProfile(currentLoggedUser, function(betsData){
        //Callback retuning null value here
        $scope.myBetEvents = betsData;
    });

});

myApp.factory('MybetFactory', ['$firebase', function($firebase){

    var factory = {};

    factory.getUsersBetsProfile = function(userId, callback){

        var firebaseRef = new Firebase("https://xxx.firebaseio.com/usersbetsprofile").child(userId);
        var firebaseBetsRef = new Firebase("https://xxx.firebaseio.com/events");
        var userBettedEvent = [];
        //retrive the data
        firebaseRef.on('value', function (snapshot) {
            console.log(snapshot.val());
            var data = snapshot.val();
            if (data){
                //callback(data);
                angular.forEach(data, function(data){
                    console.log('For Each getUsersBets',data);
                    var firebaseEventsData = firebaseBetsRef.child(data.event_id);
                    //retrive the data of bets
                    firebaseEventsData.on('value', function (snapshot) {    
                        userBettedEvent.push(snapshot.val());
                        console.log('userBettedEvent',userBettedEvent);
                        //if I call callback here then i get the values but calling callback multipul time is no the option 
                }, function (errorObject) {
                    console.log('The read failed: ' + errorObject.code);
                    });
                });
                //ISSUE:: callback returing null values
                        callback(userBettedEvent);
            }else{
                console.log('Users has no bets');
            }
        }, function (errorObject) {
            console.log('The read failed: ' + errorObject.code);
            });
    };

    return factory;
}])

查看::

<ul class="list">
        <li class="item" ng-repeat="events in myBetEvents">{{events.event_name}}</li>
 </ul>

如何让callback（）返回值并在视图中显示？ foreach返回null后导致回调的原因是什么？

Answer 1

正如@coder在评论中已经说过，您的callback(userBettedEvent)位置错误。现在，您可以在Firebase的on('value'完成之前调用。

从评论中可以清楚地看到，你只想要为一个孩子调用回调。您只需使用limit即可。

这样的事情会起作用：

if (data){
    data.limit(1).on('value', function(childData) {
        var firebaseEventsData = firebaseBetsRef.child(childData.event_id);
        firebaseEventsData.on('value', function (snapshot) {    
            userBettedEvent.push(snapshot.val());
            callback(userBettedEvent);
        }
    })

我还没有真正测试过这段代码，但我确信limit可以让你朝着正确的方向前进。

作为旁注：您似乎将Firebase用作传统数据库，将数据拉出来就像使用SQL一样。您可能会注意到：这不是Firebase的自然模型，Firebase用于同步数据更改。如果您想继续提取数据，可以考虑使用once('value'代替on('value'，以确保每次尝试从Firebase提取数据时处理程序只会触发一次。