javascript - 异步回调返回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()返回值并显示在 View 中？ foreach 返回 null 后导致回调的原因是什么？

Answer 1

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

从评论中可以清楚地看出，您已经注意到这一点，但只想为一个 child 调用回调。您只需使用限制即可。

像这样的东西会起作用:

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

我还没有真正测试过代码，但我很确定限制应该让您朝着正确的方向前进。

顺便说一句:您似乎使用 Firebase 作为传统数据库，像使用 SQL 一样提取数据。您可能会注意到:这不是 Firebase 的自然模型，它是为了同步数据更改而创建的。如果您想坚持提取数据，可以考虑使用 once('value' 而不是 on('value') 以确保处理程序每​​次仅触发一次您尝试从 Firebase 提取数据。